如何自定义MUI-X DataGrid默认滚动条样式？已尝试的CSS代码未生效求解决方案

我之前也踩过MUI-X DataGrid滚动条样式的坑！默认的滚动条确实不太美观，而且你遇到的CSS不生效的问题其实挺常见的，多半是语法或者优先级的问题，咱们一步步来解决：

先看你的代码问题所在 #

你写的sx样式里把&写成了&，这是HTML转义字符，但在JSX的sx属性里，咱们直接用&就可以引用当前组件的根元素，转义后的字符会被当成普通字符串处理，自然不会生效——这是最可能的原因！

修正后的SX内联样式方案 #

把所有&替换成&，就能让选择器正确指向DataGrid内部的虚拟滚动容器了，试试这段代码：

sx={{
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar': {
    width: '0.4em',
  },
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar-track': {
    background: '#f1f1f1',
  },
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb': {
    background: 'linear-gradient(to bottom, #6BADCE, #d7dde8)',
    borderRadius: '10px',
  },
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb:hover': {
    background: '#555',
  },
  // 兼容Firefox的滚动条样式
  '& .MuiDataGrid-virtualScroller': {
    scrollbarWidth: 'thin',
    scrollbarColor: '#6BADCE #f1f1f1',
  }
}}

如果内联样式还是被覆盖？试试全局CSS方案 #

有时候MUI的内置样式优先级会比内联sx高，这时候可以给DataGrid加个自定义类名，配合全局CSS来写样式，优先级更高更稳定：

1. 给DataGrid添加自定义类名

<DataGrid className="custom-scroll-datagrid" {...你的其他属性} />

2. 在全局CSS文件里写对应的样式（比如index.css或者App.css）

.custom-scroll-datagrid .MuiDataGrid-virtualScroller::-webkit-scrollbar {
  width: 0.4em;
}
.custom-scroll-datagrid .MuiDataGrid-virtualScroller::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.custom-scroll-datagrid .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #6BADCE, #d7dde8);
  border-radius: 10px;
}
.custom-scroll-datagrid .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Firefox兼容 */
.custom-scroll-datagrid .MuiDataGrid-virtualScroller {
  scrollbarWidth: 'thin';
  scrollbarColor: '#6BADCE #f1f1f1';
}

最后确认滚动容器类名 #

如果还是不生效，打开浏览器开发者工具（F12），找到DataGrid的滚动容器，检查它的类名是不是MuiDataGrid-virtualScroller：

• 要是你关闭了DataGrid的虚拟滚动（disableVirtualization={true}），滚动容器会变成MuiDataGrid-main，这时候要把选择器里的类名换成这个
• 用开发者工具查看样式面板，看看你的自定义样式有没有被划掉（被覆盖），如果是，就给样式加个更精确的选择器，或者临时用!important测试（不推荐长期用，还是优先调整选择器优先级）

内容来源于stack exchange