0
127
ViewsTarget 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.
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?
1 answers
Answer question0
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
}
}
}
}
}
}}
/>
