DataGrid 分页中的目标特定 Select

Question

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

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

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

结果成功了。当我在我的代码中应用 selector 时，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 更改数据网格组件分页中 select 元素内所有数字的 font-size？

Answer 1

DataGrid 有一个 Pagination slot to let you override the pagination component and its props. It uses TablePagination behind the scene, which exposes the SelectProps to let you override the Select component. The Select itself has a MenuProps 允许您覆盖下拉覆盖的道具。因此，综上所述，这就是您针对正确的组件必须做的事情：

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

DataGrid 分页中的目标特定 Select

Target Specific Select in DataGrid Pagination

javascript

css

datagrid

reactjs

material-ui