Seeking to adjust the font size of numerical values (10, 25, and 50 as shown in the screenshot below) within rows per page selection within a pagination section of a DataGrid component.
https://i.sstatic.net/PnIDa.png
After inspecting each number, it was revealed that .MuiMenuItem-root served as the selector for each element.
Subsequently, modifications were made to the font-size and color (as a confirmation of the accuracy of .MuiMenuItem-root) as displayed in the accompanying image.
https://i.sstatic.net/42xQG.png
The alterations proved successful during testing.
However, upon implementing the same selector in my codebase, the changes did not take effect (the font-size remained unchanged).
Provided below is the relevant code snippet:
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",
How can I successfully alter the font size of all numbers within the select element in the pagination section of a Data Grid component using withStyles?