React-MUI Data Grid（免费版）自定义滚动条样式求助（附示例沙箱）

直接包裹自定义滚动条组件失效的核心原因是：MUI Data Grid内部自带虚拟滚动容器，外部滚动条会被其内部滚动逻辑覆盖，因此必须直接针对Grid的内部滚动容器修改样式。以下是具体实现步骤：

1. 定位目标滚动容器类名 #

通过浏览器开发者工具可以确认，Data Grid的垂直滚动容器类为.MuiDataGrid-virtualScroller，水平滚动容器类为.MuiDataGrid-horizontalScrollContainer。

2. 注入自定义滚动条样式 #

你可以选择全局样式注入，或者通过MUI的styled组件/sx属性实现组件内样式隔离。

方法一：全局CSS样式 #

在项目的全局CSS文件中添加以下代码：

/* 垂直滚动条样式 */
.MuiDataGrid-virtualScroller::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 4px;
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 4px;
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时的滑块颜色 */
}

/* 水平滚动条样式 */
.MuiDataGrid-horizontalScrollContainer::-webkit-scrollbar {
  height: 8px; /* 滚动条高度 */
}

.MuiDataGrid-horizontalScrollContainer::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

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

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

/* Firefox 兼容性支持 */
.MuiDataGrid-virtualScroller,
.MuiDataGrid-horizontalScrollContainer {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

方法二：使用MUI styled组件实现样式隔离 #

通过styled组件包裹DataGrid，实现组件级别的样式定制：

import { DataGrid } from '@mui/x-data-grid';
import { styled } from '@mui/material/styles';

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  '& .MuiDataGrid-virtualScroller': {
    '&::-webkit-scrollbar': {
      width: '8px',
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: theme.palette.grey[100],
      borderRadius: '4px',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: theme.palette.grey[500],
      borderRadius: '4px',
      '&:hover': {
        backgroundColor: theme.palette.grey[700],
      },
    },
    // Firefox 兼容
    scrollbarWidth: 'thin',
    scrollbarColor: `${theme.palette.grey[500]} ${theme.palette.grey[100]}`,
  },
  '& .MuiDataGrid-horizontalScrollContainer': {
    '&::-webkit-scrollbar': {
      height: '8px',
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: theme.palette.grey[100],
      borderRadius: '4px',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: theme.palette.grey[500],
      borderRadius: '4px',
      '&:hover': {
        backgroundColor: theme.palette.grey[700],
      },
    },
    // Firefox 兼容
    scrollbarWidth: 'thin',
    scrollbarColor: `${theme.palette.grey[500]} ${theme.palette.grey[100]}`,
  },
}));

// 使用示例
export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <StyledDataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

关键说明 #

• 不要尝试用外部滚动条组件包裹DataGrid，因为其内部的虚拟滚动机制会接管滚动行为，导致外部滚动条失效。
• 可以根据需求调整滚动条的宽度、颜色、圆角等属性，匹配react-scrollbars的视觉效果。

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