Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

280
Vistas
¿Cómo agregar el estilo de cursor "no permitido" a la fila deshabilitada de la cuadrícula de datos de la interfaz de usuario del material?

Tengo una fila deshabilitada condicional en la cuadrícula de datos de la interfaz de usuario del material donde el usuario no puede seleccionar o realizar acciones en ella. Quiero mostrar el cursor: "not-allowed" en esta fila. ¿Cómo podemos agregar estilo a esa fila? Como no tenemos ningún parámetro en las filas que especifique que es una fila deshabilitada.

 <DataGrid rowHeight={75} components={{ NoRowsOverlay: CustomNoRowsOverlay, }} onSelectionModelChange={currentlySelected} selectionModel={[...selected]} columns={columns} rows={rows} autoHeight disableSelectionOnClick={disableSelectionOnClick} {...props} checkboxSelection={role === ROLES.ADMIN} disableColumnMenu isRowSelectable={(params) => !(params?.row?.id === currentUserID) } />

y Así es como se ven la fila deshabilitada y la fila normal en el elemento de inspección del navegador. La primera es la fila deshabilitada aquí. ingrese la descripción de la imagen aquí

Implementación de CSS para la clase raíz, en la que se envuelve la cuadrícula de datos.

 root: { '& .MuiDataGrid-columnsContainer': { backgroundColor: theme.palette.secondary.main, color: theme.palette.text.light, lineHeight: '62px !important', maxHeight: '62px !important', minHeight: '62px !important', '& .MuiCheckbox-root': { color: theme.palette.checkbox.secondary, }, }, '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': { outline: 'none !important', }, '& .MuiDataGrid-window': { backgroundColor: colors.bgColor.secondary, }, '& .MuiDataGrid-columnSeparator': { display: 'none' }, ' '& .MuiCheckbox-root': { color: theme.palette.checkbox.main, }, '& .MuiDataGrid-sortIcon': { color: theme.palette.iconColor.default, }, '& .MuiCheckbox-colorPrimary.Mui-disabled': { color: 'rgba(0, 0, 0, 0.26)', }, },
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Aplique sus propios estilos css personalizados e impórtelos a su componente:

 import './custom.css'
 .MuiCheckbox-colorPrimary.Mui-disabled { cursor: not-allowed !important; }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda