MUI v4中自定义MUI X DataGrid Toolbar弹出框/Popper样式的方法

你遇到的样式不生效的核心原因：Data Grid 工具栏的弹出层（Popper）默认挂载在document.body根节点下，和工具栏按钮组件不属于同一个DOM父级，因此你在按钮组件内部写的后代选择器无法命中弹出层内的元素。

1. 修改所有Grid Toolbar弹出层内的部分样式属性 #

推荐使用全局主题覆盖的方案，只会作用于Data Grid的弹出层，不会影响项目其他组件的样式：

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  overrides: {
    MuiDataGrid: {
      // panelContent是所有Data Grid工具栏弹出层的公共根类名
      panelContent: {
        // 仅修改弹出层内的Typography-body1样式
        '& .MuiTypography-body1': {
          fontSize: 20,
          color: 'red'
        },
        // 也可以单独指定其他单个元素的样式
        '& .MuiCheckbox-root': {
          color: 'dodgerblue'
        }
      }
    }
  }
});

// 项目根组件用自定义主题包裹即可生效
function App() {
  return (
    <MuiThemeProvider theme={customTheme}>
      {/* 你的项目代码 */}
    </MuiThemeProvider>
  )
}

如果仅需要修改单个工具栏按钮的弹出层样式，可以给Popper指定挂载容器，让它和按钮在同一个DOM层级，原有组件内的样式就可以生效：

import { useRef } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { GridToolbarColumnsButton } from '@mui/x-data-grid-pro';

const CustomGridToolbarColumns = withStyles((theme) => ({
  root: {
    color: "dodgerblue",
    "& .MuiTypography-body1": {
      fontSize: 20,
      color: "red"
    }
  }
}))((props) => {
  const containerRef = useRef(null);
  return (
    <div ref={containerRef}>
      <GridToolbarColumnsButton 
        {...props} 
        PopperProps={{ container: containerRef.current }} 
      />
    </div>
  )
});

2. 修改所有Grid Toolbar弹出层内的全部样式属性 #

直接在主题的panelContent配置项中定义根样式，所有子元素会继承根样式，也可以逐一覆盖所有内部元素的样式：

const customTheme = createMuiTheme({
  overrides: {
    MuiDataGrid: {
      panelContent: {
        // 根样式，所有子元素默认继承
        fontSize: 16,
        color: '#222',
        backgroundColor: '#fafafa',
        padding: '16px',
        boxShadow: '0 2px 12px rgba(0,0,0,0.1)',
        borderRadius: '4px',
        // 逐一覆盖内部所有元素样式
        '& .MuiTypography-root': {
          marginBottom: '8px'
        },
        '& .MuiButton-root': {
          fontSize: 14,
          textTransform: 'none'
        },
        '& .MuiFormControlLabel-root': {
          marginLeft: 0
        }
        // 可根据需要添加所有需要修改的元素样式规则
      }
    }
  }
});

如果出现样式优先级不够不生效的情况，可以叠加&提升优先级，比如&& .MuiTypography-body1，优先级会高于组件内置样式，强制生效。

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