0
154
Vistas¿Cómo puedo personalizar el esquema del encabezado de la cuadrícula de datos mui-material?
Quiero cambiar el diseño del esquema de Mui Datagrid de
a
No puedo cargar el código por alguna razón, ¿hay algún material de referencia o código de ejemplo?
2 Respuestas
Responde la pregunta0
La forma más sencilla de personalizar la cuadrícula de datos es usar accesorios sx . puede consultar todas las reglas css disponibles en https://mui.com/api/data-grid/data-grid/#css
para eliminar el borde de la cuadrícula de datos, use la regla .MuiDataGrid-root y dentro de ella puede agregar propiedades de borde. Veo que también ha eliminado el separador de columnas. Para hacerlo, use .MuiDataGrid-columnSeparator
si marca el siguiente código, he prefijado .MuiDataGrid-root con & sign. pero no he agregado ni firmado en & .MuiDataGrid-columnSeparator . puede abrir su herramienta de desarrollo de Chrome y ver si la regla CSS asociada tiene alguna clase principal adjunta o no. si tiene alguno, puede prefijar la regla con & . de esta manera, no tiene que escribir la regla de clase completa.
<DataGrid ... sx={{ '.MuiDataGrid-columnSeparator': { display: 'none', }, '&.MuiDataGrid-root': { border: 'none', }, }} />0
Mire la cuadrícula de datos de la interfaz de usuario del material: página de estilo