DataGrid分页中的目标特定选择

Question

我想更改DataGrid 组件分页内每页选择元素的行内所有数字（10、25 和 50，如下面的屏幕截图所示）的字体大小。

我检查了每个数字，并得到.MuiMenuItem-root 作为每个元素的选择器。

然后我更改了font-size 和color（只是为了证明.MuiMenuItem-root 是正确的选择器），如下面的屏幕截图所示。

结果是成功的。 当我在代码中应用选择器时，font-size 不起作用（没有任何改变）。

这是我的代码：

CustomDataGrid.js：

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

const CustomDataGrid = withStyles((theme) => ({
  root: {
    // ROOT
    height: '100%',
    border: 'none',

    ...some code here

    // PAGINATION
    '& .MuiTablePagination-caption': {
      fontSize: 12,
    },
    '& .MuiTablePagination-select': {
      fontSize: 12,
    },
    '& .MuiMenuItem-root': {
      fontSize: 12,
    },
    '& .MuiIconButton-root': {
      padding: 8,
    },
  },
}))(DataGridPro)

export default CustomDataGrid

依赖项（在 package.json 文件中）：

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid": "^4.0.0",
"@mui/x-data-grid-pro": "^4.0.0",

那么如何使用withStyles 在数据网格组件的分页内更改选择元素内所有数字的font-size？

Answer 1

DataGrid 有一个Pagination 插槽，可以让您覆盖分页组件及其道具。它在幕后使用TablePagination，其中exposes SelectProps 让您覆盖Select 组件。 Select 本身有一个 MenuProps，它允许您覆盖下拉覆盖的道具。因此，有了所有这些，这就是您必须针对正确的组件做的事情：

<DataGrid
  pagination
  {...data}
  componentsProps={{
    pagination: {
      SelectProps: {
        MenuProps: {
          sx: {
            color: "red",
            "& .MuiMenuItem-root": {
              fontSize: 30
            }
          }
        }
      }
    }
  }}
/>