Target Specific Select in DataGrid Pagination-CodePudding

I want to change the font size of all numbers (10, 25, and 50 as seen in this screenshot below) inside rows per page select element inside a pagination of a DataGrid component.

I inspected each number and I got .MuiMenuItem-root as the selector for each element.

Then I changed the font-size and color (just to prove that .MuiMenuItem-root was the right selector) as seen in the screenshot below.

The result was successful. When I applied the selector in my code, the font-size didn't work (nothing changed).

Here is my code:

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

dependencies (in package.json file):

"@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",

So how can I change the font-size of all numbers inside the select element inside a pagination of a Data Grid component using withStyles?

CodePudding user response：

DataGrid has a