如何在MUI X Data Grid中强制始终显示水平滚动条

手动在非指定节点设置overflow-x: scroll不生效的核心原因，是MUI X Data Grid的滚动逻辑完全托管在内部虚拟滚动容器上，组件会根据内容宽度动态修改该容器的overflow属性，外层节点加的滚动样式既不会命中正确的滚动上下文，还容易被组件内置样式覆盖。

以下是可直接落地的实现方式：

• 单组件配置（推荐优先使用）
  给DataGrid组件传入sx属性，精准命中内部滚动容器，加!important覆盖组件动态样式：

  <DataGrid
    rows={tableRows}
    columns={tableColumns}
    sx={{
      // 命中核心虚拟滚动容器
      '.MuiDataGrid-virtualScroller': {
        overflowX: 'scroll !important',
        // 可选：自定义滚动条样式，让提示更明显
        '&::-webkit-scrollbar': {
          height: 10,
        },
        '&::-webkit-scrollbar-thumb': {
          backgroundColor: '#bfbfbf',
          borderRadius: 4,
        }
      },
      // 强制显示横向滚动条轨道，避免组件自动隐藏
      '.MuiDataGrid-scrollbar--horizontal': {
        display: 'block !important',
      }
    }}
  />
  

• 全局样式覆盖（适合项目内所有DataGrid都需要常驻水平滚动条的场景）
  在项目全局CSS文件中添加以下规则即可：

  .MuiDataGrid-virtualScroller {
    overflow-x: scroll !important;
  }
  .MuiDataGrid-scrollbar--horizontal {
    display: block !important;
  }
  

• 强化提示效果配置
  如果遇到内容宽度刚好和容器持平、滚动条处于不可交互状态的情况，可以给所有列设置最小宽度，保证表格总宽度始终大于容器宽度，让滚动条保持可交互状态，提示效果更明确：

  const tableColumns = rawColumns.map(col => ({
    ...col,
    minWidth: 140, // 根据业务场景调整最小列宽
    flex: 1
  }))
  

注意：不要在外层包裹的自定义div上添加overflow-x: scroll，会生成双层滚动条破坏交互，必须命中组件自带的.MuiDataGrid-virtualScroller节点才是正确的配置位置。

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