0
121
ViewsSelección específica de destino en la paginación de DataGrid
Quiero cambiar el tamaño de fuente de todos los números (10, 25 y 50 como se ve en esta captura de pantalla a continuación) dentro de las filas por elemento de selección de página dentro de una paginación de un componente DataGrid .
Inspeccioné cada número y obtuve .MuiMenuItem-root como selector para cada elemento.
Luego cambié el font-size y color de la fuente (solo para probar que .MuiMenuItem-root era el selector correcto) como se ve en la captura de pantalla a continuación.
El resultado fue exitoso. Cuando apliqué el selector en mi código, el font-size no funcionó (nada cambió).
Aquí está mi código:
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 CustomDataGriddependencias (en el archivo 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", Entonces, ¿cómo puedo cambiar el font-size de todos los números dentro del elemento de selección dentro de una paginación de un componente de Data Grid usando withStyles ?
1 answers
Answer question0
DataGrid tiene una Pagination de paginación que le permite anular el componente de paginación y sus accesorios. Utiliza TablePagination detrás de escena, que expone SelectProps para permitirle anular el componente Select . El Select en sí tiene un MenuProps que le permite anular los accesorios de la superposición desplegable. Entonces, con todo eso, esto es lo que debe hacer para apuntar al componente correcto:
<DataGrid pagination {...data} componentsProps={{ pagination: { SelectProps: { MenuProps: { sx: { color: "red", "& .MuiMenuItem-root": { fontSize: 30 } } } } } }} /> 