如何解决MUI X Data Grid全局自定义样式不生效及列边框问题？

原代码不生效原因 #

你使用的components.root配置方式不符合MUI X DataGrid的API规范：components属性用于替换整个组件（如自定义表头、单元格组件），而非直接添加全局样式，因此样式无法生效。

解决方案一：Theme全局定制（推荐全局复用） #

通过createTheme结合ThemeProvider实现全局样式注入，所有DataGrid实例都会自动应用配置：

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

const theme = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        // 配置单元格基础样式
        cell: {
          fontSize: '18px',
          textOverflow: 'ellipsis',
          whiteSpace: 'pre',
          // 添加单元格底部边框
          borderBottom: '1px solid #e0e0e0',
        },
        // 可选：配置表头单元格底部边框
        headerCell: {
          borderBottom: '2px solid #ccc',
        },
      },
    },
  },
});

// 在根组件中包裹ThemeProvider
function App() {
  return (
    <ThemeProvider theme={theme}>
      <DataGrid rows={rows} columns={columns} />
    </ThemeProvider>
  );
}

解决方案二：sx属性封装复用（局部/单实例） #

如果仅需给特定DataGrid实例应用样式，可封装成自定义组件复用：

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

// 封装可复用的自定义DataGrid
const StyledDataGrid = (props) => {
  return (
    <DataGrid
      sx={{
        '& .MuiDataGrid-cell': {
          fontSize: '18px',
          textOverflow: 'ellipsis',
          whiteSpace: 'pre',
          borderBottom: '1px solid #e0e0e0',
        },
        '& .MuiDataGrid-headerCell': {
          borderBottom: '2px solid #ccc',
        },
      }}
      {...props}
    />
  );
};

// 使用示例
<StyledDataGrid rows={rows} columns={columns} />

额外提示 #

• 确保使用MUI X DataGrid的最新稳定版本，旧版本可能存在类名或API差异
• 如需控制特殊状态样式（如hover、选中），可在样式中嵌套伪类，例如：'& .MuiDataGrid-cell:hover': { backgroundColor: '#f5f5f5' }

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