Search code examples
javascriptcssreactjsdatagridmaterial-ui

Target Specific Select in DataGrid Pagination

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.

enter image description here

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.

enter image description here

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?

Solution

  • DataGrid has a 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 which allows you to override the props of the dropdown overlay. So with all of that, this is what you have to do to target the right component:

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

    Codesandbox Demo