基于MUI 5 Grid组件实现表格的两个技术问题咨询

问题1：让表格每行的Grid子项高度保持一致 #

要实现每行Grid子项高度统一，核心是让子项撑满所在行的高度，同时保证行内元素对齐，可通过以下两种方式实现：

方式1：通过Grid属性+子项样式设置 #

给每行的Grid容器明确设置alignItems="stretch"（Grid默认值，显式设置更稳妥），再给每个Grid子项添加height: 100%样式，让子项自动填满行高，同时可搭配flex布局让内容垂直居中：

// 行容器
<Grid container alignItems="stretch" spacing={2}>
  {/* 子项 */}
  <Grid item xs={3} sx={{ height: "100%", display: "flex", alignItems: "center" }}>
    {/* 内容 */}
  </Grid>
</Grid>

方式2：全局样式统一配置 #

如果是全局表格组件，可通过styled组件给所有Grid子项统一设置样式：

import { styled } from "@mui/material/styles";
import Grid from "@mui/material/Grid";

const TableRowGrid = styled(Grid)(({ theme }) => ({
  "& .MuiGrid-item": {
    height: "100%",
    display: "flex",
    alignItems: "center",
  },
}));

// 使用时
<TableRowGrid container spacing={2}>
  {/* 子项 */}
</TableRowGrid>

问题2：屏幕尺寸小于500px时为Grid表格容器添加滚动条 #

可通过CSS媒体查询或MUI的useMediaQuery钩子实现，两种方式任选：

方式1：直接在sx中写媒体查询 #

无需额外钩子，直接在容器样式中添加断点规则，同时设置最小宽度保证滚动有效：

<Grid
  container
  sx={{
    width: "100%",
    minWidth: "500px",
    "@media (max-width: 500px)": {
      overflowX: "auto",
    },
  }}
>
  {/* 表格内容 */}
</Grid>

方式2：使用MUI的useMediaQuery钩子 #

先导入依赖，再判断屏幕尺寸后动态设置样式：

import { useMediaQuery } from "@mui/material/styles";

// 组件内
const isSmallScreen = useMediaQuery("(max-width: 500px)");

<Grid
  container
  sx={{
    width: "100%",
    minWidth: "500px",
    overflowX: isSmallScreen ? "auto" : "visible",
  }}
>
  {/* 表格内容 */}
</Grid>

内容的提问来源于stack exchange，提问作者MrMz