Cómo cambiar el color del texto de la fila seleccionada en la tabla de interfaz de usuario del material

Después de buscar en diversos repositorios y páginas webs de internet al terminar hemos descubierto la resolución que te enseñaremos pronto.

Solución:

El color de fondo se controla en TableRow. Para obtener la especificidad correcta (nunca debería necesitar aprovechar “! importante” al anular los estilos Material-UI), debe aprovechar la clase “hover” similar a lo que se hace dentro TableRow.

El color se controla en TableCellasí que ese es el nivel donde necesitas controlarlo.

Para una solución de trabajo, en los estilos tendría algo como:

const styles = theme => (
  tableRow: 
    "&$hover:hover": 
      backgroundColor: "blue"
    
  ,
  tableCell: 
    "$hover:hover &": 
      color: "pink"
    
  ,
  hover: 
);

luego en la representación:

            
              
                row.name
              

Aquí hay una versión de trabajo basada en su sandbox:

Aquí hay un ejemplo similar, pero usando “seleccionado” en lugar de “pasar”:

Esto utiliza los siguientes estilos:

const styles = theme => (
  tableRow: 
    "&$selected, &$selected:hover": 
      backgroundColor: "purple"
    
  ,
  tableCell: 
    "$selected &": 
      color: "yellow"
    
  ,
  selected: 
);

y algunos dicen:

 const [selectedID, setSelectedID] = useState(null);

y cambiando la representación de TableRow para que sea:

             
                setSelectedID(row.id);
              
              selected=selectedID === row.id
              classes= selected: classes.selected 
              className=classes.tableRow
            >

v4 de Material-UI incluirá algunos cambios que deberían hacer que la anulación de estilos sea considerablemente más fácil (y más fácil de descubrir cómo hacerlo correctamente sin mirar el código fuente).

En v4 de Material-UI, podemos usar los nombres de clases globales para el estado seleccionado (“Mui-seleccionado”) y para TableCell (“MuiTableCell-root”) y luego solo necesitamos aplicar una sola clase a TableRow:

const styles = (theme) => (
  tableRow: 
    "&.Mui-selected, &.Mui-selected:hover": 
      backgroundColor: "purple",
      "& > .MuiTableCell-root": 
        color: "yellow"
      
    
  
);

Reseñas y puntuaciones

Recuerda algo, que tienes la capacidad de añadir una valoración justa si diste con la respuesta.

---

---

Utiliza Nuestro Buscador