0
265
VistasAgregue un estilo personalizado dentro del componente emergente Material-UI de la barra de herramientas DataGrid
Estoy creando un componente de Data Grid Toolbar personalizado modificando los componentes existentes de la Grid Toolbar de Material-UI .
Este es el ejemplo oficial de los componentes de la Grid Toolbar :
Si hacemos clic en uno de los componentes de la Grid Toolbar , se mostrará una ventana emergente como se ve en la captura de pantalla a continuación.
Lo que quiero hacer es cambiar todos los tamaños de fuente dentro de cada ventana emergente/ventana emergente de cada componente de la Grid Toolbar .
Intento cambiar un texto, por ejemplo. Como podemos ver en la captura de pantalla a continuación, si inspeccionamos el texto y luego cambiamos las propiedades de color y font-size directamente, cambiaría.
Pero si tomo y copio el selector (en este caso es .MuiTypography-body1 ), luego lo pego en mi código, no cambia nada (las propiedades de color y font-size no cambian).
Aquí está el código simple:
const CustomGridToolbarColumns = withStyles((theme) => ({ root: { color: "dodgerblue", "& .MuiTypography-body1": { fontSize: 20, color: "red" } } }))(GridToolbarColumnsButton); También quiero cambiar todas las propiedades de color y font-size dentro de cada ventana emergente/ventana emergente de cada componente de la Grid Toolbar . Inspecciono la ventana emergente/popper y luego cambio el font-size y las propiedades de color , pero aún no funciona como se ve en la captura de pantalla a continuación.
Aquí están las dependencias (en el archivo package.json):
"@material-ui/core": "^4.12.3", "@material-ui/styles": "^4.11.4", "@mui/x-data-grid-pro": "^4.0.0",Aquí está el código completo: https://codesandbox.io/s/data-grid-material-ui-custom-toolbar-kd9gj
Entonces mis preguntas son:
- ¿Cómo podemos cambiar algunas propiedades dentro de la ventana emergente/ventana emergente de cada componente de la
Grid Toolbar? - ¿Cómo podemos cambiar todas las propiedades dentro de la ventana emergente/ventana emergente de cada componente de la
Grid Toolbar?
1 Respuestas
Responde la pregunta0
Puede inspeccionar el elemento y ver que el componente al que necesita aplicar el estilo se llama GridPanel . Este es el componente contenedor del panel de filtros y columnas. Vea todas las ranuras de componentes aquí como referencia.
V5
<DataGrid {...data} components={{ Toolbar: GridToolbar, }} componentsProps={{ panel: { sx: { '& .MuiTypography-root': { color: 'dodgerblue', fontSize: 20, }, '& .MuiDataGrid-filterForm': { bgcolor: 'lightblue', }, }, }, }} /> Para cambiar los estilos de los otros 2 GridMenu s (densidad/exportación), debe apuntar al nombre de clase MuiDataGrid-menuList . Actualmente veo que no hay otra forma de usar estilos globales porque DataGrid no le permite personalizar el componente GridMenu :
<GlobalStyles styles={{ '.MuiDataGrid-menuList': { backgroundColor: 'pink', '& .MuiMenuItem-root': { fontSize: 26, }, }, }} /> 
V4
import { DataGrid, GridToolbar, GridPanel } from "@mui/x-data-grid"; const useStyles = makeStyles({ panel: { '& .MuiTypography-root': { color: 'dodgerblue', fontSize: 20, }, }, }); <DataGrid {...data} components={{ Toolbar: GridToolbar, }} componentsProps={{ // GridPanel panel: { className: classes.panel }, }} /> <GlobalStyles styles={{ ".MuiDataGrid-gridMenuList": { backgroundColor: "pink", "& .MuiMenuItem-root": { fontSize: 26 } } }} />