如何让MUI X Data Grid的水平滚动条始终可见？

1. 用高优先级CSS覆盖默认样式 #

直接修改MuiDataGrid-virtualScroller时，容易被组件内联样式覆盖，得用更高优先级的选择器。可以写全局样式或者组件模块样式：

.MuiDataGrid-virtualScroller {
  overflow-x: scroll !important;
}

/* 针对Chrome/Safari等WebKit浏览器，强制显示滚动条并自定义样式 */
.MuiDataGrid-virtualScroller::-webkit-scrollbar {
  height: 8px;
  opacity: 1;
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 针对Firefox设置滚动条可见 */
.MuiDataGrid-virtualScroller {
  scrollbar-width: thin;
}

2. 用DataGrid的sx属性直接注入样式（MUI v5+推荐） #

通过组件自带的sx属性给虚拟滚动容器加样式，优先级更高，不用全局污染：

<DataGrid
  columnVirtualization
  // 你的其他配置项
  sx={{
    '& .MuiDataGrid-virtualScroller': {
      overflowX: 'scroll',
      '&::-webkit-scrollbar': { height: '8px' },
      '&::-webkit-scrollbar-track': { backgroundColor: '#f1f1f1' },
      '&::-webkit-scrollbar-thumb': {
        backgroundColor: '#888',
        borderRadius: '4px',
      },
    },
  }}
/>

3. 给外层容器添加滚动兜底 #

如果上面的方法还不生效，可以给DataGrid套一层带横向滚动的容器，确保溢出时触发滚动条：

<div style={{ overflowX: 'auto', width: '100%' }}>
  <DataGrid
    columnVirtualization
    // 你的其他配置项
  />
</div>

注意点 #

列虚拟化开启后，DataGrid内部会动态控制滚动条的显示状态，所以必须用足够优先级的样式才能覆盖默认逻辑。另外，不同浏览器的滚动条样式规则不一样，需要针对性适配。

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