使用withStyles修改DataGrid分页每页行数选择器内数字字体大小不生效如何解决

问题根因 #

DataGrid分页的行数选择器下拉选项（对应.MuiMenuItem-root元素）默认通过MUI的Portal组件挂载到document.body根节点下，不属于DataGridPro自身的DOM子树，所以你写在DataGrid根节点下的后代选择器无法匹配到这些元素，导致样式不生效。

实现方案 #

方案1：关闭Portal挂载，复用原有样式配置 #

通过componentsProps修改分页选择器的菜单属性，关闭Portal挂载逻辑，让下拉菜单渲染在DataGrid的DOM子树内，你之前写的.MuiMenuItem-root样式即可正常生效：

import { DataGridPro } from '@mui/x-data-grid-pro'
import { withStyles } from '@material-ui/core/styles'

const StyledDataGrid = withStyles((theme) => ({
  root: {
    height: '100%',
    border: 'none',
    // 分页相关样式
    '& .MuiTablePagination-caption': {
      fontSize: 12,
    },
    '& .MuiTablePagination-select': {
      fontSize: 12,
    },
    '& .MuiMenuItem-root': {
      fontSize: 12,
    },
    '& .MuiIconButton-root': {
      padding: 8,
    },
  },
}))(DataGridPro)

// 封装自定义组件，透传属性并添加分页配置
const CustomDataGrid = (props) => {
  return (
    <StyledDataGrid
      {...props}
      componentsProps={{
        pagination: {
          SelectProps: {
            MenuProps: {
              // 关闭Portal，菜单挂载到当前父节点下
              disablePortal: true,
            }
          }
        }
      }}
    />
  )
}

export default CustomDataGrid

方案2：全局主题覆盖（不影响其他业务模块的MenuItem样式） #

如果不想修改Portal挂载逻辑，可以通过MUI主题的全局覆盖配置，仅针对DataGrid分页的下拉选项设置样式：
在你项目的根主题配置中添加以下规则即可：

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

const theme = createMuiTheme({
  overrides: {
    MuiTablePagination: {
      select: {
        // 仅匹配分页选择器的下拉选项
        '& + .MuiPopover-root .MuiMenuItem-root': {
          fontSize: 12,
        }
      }
    }
  }
})

// 根组件用自定义主题包裹
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的项目业务代码 */}
    </ThemeProvider>
  )
}

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