MUI X Data Grid无法随侧边栏收缩自适应宽度问题求助

我开发的带可伸缩侧边栏的应用中，MUI X Data Grid存在宽度适配异常：缩小侧边栏时，Data Grid能正常扩大宽度；但扩大侧边栏时，Data Grid不会随之收缩，始终保持较大的宽度状态。侧边栏采用MUI官方的Mini Variant Drawer逻辑，相关代码如下：

页面根布局代码 #

<Box
  sx={{
    display: "flex",
    width: "100%",
    height: "100%",
    bgcolor: "background.paper",
    paddingTop: 10,
  }}
>
  {/* <Navigation /> */}
  {/* Navigation component */}
  <Topbar toggleDrawer={() => setOpen((o) => !o)} />
  <Sidebar open={open} close={() => setOpen(false)} />
  {/* Navigation component */}
  <Box
    component="main"
    sx={{
      width: "100%",
      height: "100%",
      bgcolor: "background.default",
      paddingBottom: 5,
      borderRadius: "8px 0 0 0",
      "@media(max-width:600px)": {
        borderRadius: 0,
      },
    }}
  >
    {/* the page */}
    <Box paddingX={2.5} width="100%">
      <Paper sx={{ padding: 4, paddingBottom: 0 }} elevation={0}>
        <Box width="100%" paddingY={4} height="625px">
          {/* <FinanceiroDataGrid data={data || []} mutate={() => mutate()} /> */}
          {/* DataGrid component */}
            <Box sx={{ height: "100%", width: "100%" }}>
              <DataGrid
                columns={columns}
                rows={rows}
                slots={{ noRowsOverlay: NoRows }}
              />
            </Box>
          {/* DataGrid component */}
        </Box>
      </Paper>
    </Box>
    {/* the page */}
  </Box>
</Box>

Data Grid列配置代码 #

const columns: GridColDef[] = useMemo(
() => [
  {
    field: "efetuado",
    headerName: "Efetado",
    editable: false,
    width: 120,
    type: "boolean",
    renderCell: (cell) => (
      <ChipEfetuado efetuado={cell.value} entrada={cell.row.valor >= 0} />
    ),
  },
  {
    field: "data",
    headerName: "Data",
    editable: false,
    width: 100,
    type: "date",
    renderCell: (cell) => (
      <Chip
        label={`${cell.value.getDate()} de ${meses[
          cell.value.getMonth()
        ].substring(0, 3)}`}
        size="small"
      />
    ),
  },
  {
    field: "valor",
    headerName: "Valor",
    editable: false,
    width: 120,
    type: "number",
    renderCell: (cell) =>
      `${cell.value < 0 ? "- " : ""}${formatarDinheiro(cell.value)}`,
  },
  {
    field: "nome",
    headerName: "Nome",
    sortable: false,
    editable: false,
    hideable: false,
    flex: 1,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "remetente",
    headerName: "Agente",
    editable: false,
    flex: 1,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },

  {
    field: "forma",
    headerName: "Forma",
    editable: false,
    width: 100,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "descricao",
    headerName: "Descrição",
    sortable: false,
    editable: false,
    width: 335,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "Ações",
    type: "actions",
    width: 100,
    sortable: false,
    hideable: false,
    getActions: (params) => [
      <EditButton key={params.id} id={params.id} />,
      <DeleteButton key={params.id} onClick={() => setDialog(params.id)} />,
    ],
  },
],
[]
);

修复方案 #

1. 调整主内容容器的flex属性 #

将主内容区域的width: "100%"替换为flex: 1，这样当侧边栏宽度变化时，主容器能自动调整自身宽度，把尺寸变化传递给内部的Data Grid。

2. 强制Data Grid响应宽度变化 #

给Data Grid添加width="100%"明确其宽度占满容器，同时通过key={open}绑定侧边栏的展开状态——当侧边栏状态变化时，Data Grid会重新渲染，从而正确计算新的宽度。

3. 优化列的宽度配置 #

把descricao列的固定宽度width: 335改为flex: 2并设置minWidth: 200，避免固定宽度导致整体无法收缩，同时保证内容的最小可读性。

修改后的代码示例 #

根布局代码修改 #

<Box
  sx={{
    display: "flex",
    width: "100%",
    height: "100%",
    bgcolor: "background.paper",
    paddingTop: 10,
  }}
>
  <Topbar toggleDrawer={() => setOpen((o) => !o)} />
  <Sidebar open={open} close={() => setOpen(false)} />
  <Box
    component="main"
    sx={{
      flex: 1, // 替换width:100%为flex:1
      height: "100%",
      bgcolor: "background.default",
      paddingBottom: 5,
      borderRadius: "8px 0 0 0",
      "@media(max-width:600px)": {
        borderRadius: 0,
      },
    }}
  >
    <Box paddingX={2.5} width="100%">
      <Paper sx={{ padding: 4, paddingBottom: 0 }} elevation={0}>
        <Box width="100%" paddingY={4} height="625px">
          <Box sx={{ height: "100%", width: "100%" }}>
            <DataGrid
              columns={columns}
              rows={rows}
              slots={{ noRowsOverlay: NoRows }}
              width="100%"
              key={open} // 绑定侧边栏状态触发重绘
            />
          </Box>
        </Box>
      </Paper>
    </Box>
  </Box>
</Box>

列配置修改（descricao字段） #

{
  field: "descricao",
  headerName: "Descrição",
  sortable: false,
  editable: false,
  flex: 2,
  minWidth: 200,
  renderCell: (cell) => (
    <Tooltip
      title={<Typography fontSize={12}>{cell.value}</Typography>}
      placement="bottom-start"
      arrow
    >
      {cell.value}
    </Tooltip>
  ),
}

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