MUI DataGrid在Grid父容器中无法按预期自适应调整尺寸

问题场景 #

使用Grid布局的父容器包裹MUI DataGrid和一个普通div，代码如下：

JSX代码 #

<div className="container">
  <DataGrid
    rows={someRows}
    columns={someColumns}
  />
  <div className="somethingElse">
    ...
  </div>
</div>

CSS代码 #

.container {
  display: grid;
  width: 100%;
  grid-template-columns: 3fr 1fr;
}

预期效果：DataGrid和右侧div按3:1比例并排，窗口缩放时同步伸缩。但实际窗口调整时，DataGrid尺寸无变化。

解决方案 #

需要修改以下样式规则：

1. 给DataGrid添加自定义类名，设置width: 100%和min-width: 0
2. 确保右侧div也占满网格轨道宽度

修改后的JSX #

<div className="container">
  <DataGrid
    className="dataGrid"
    rows={someRows}
    columns={someColumns}
  />
  <div className="somethingElse">
    ...
  </div>
</div>

修改后的CSS #

.container {
  display: grid;
  width: 100%;
  grid-template-columns: 3fr 1fr;
  /* 可选：添加间距优化布局 */
  gap: 1rem;
}

.dataGrid {
  /* 让DataGrid占满分配的网格轨道宽度 */
  width: 100%;
  /* 关键：打破DataGrid默认的最小宽度限制，允许收缩 */
  min-width: 0;
}

.somethingElse {
  /* 确保右侧元素占满网格轨道宽度 */
  width: 100%;
}

原因说明 #

MUI DataGrid组件默认自带min-width样式，这会限制它在Grid布局中跟随轨道收缩。设置min-width: 0可以解除这个限制，配合width: 100%让它完全填充网格分配的空间，从而实现窗口缩放时的比例同步。

内容的提问来源于stack exchange，提问作者I am X