Soy un novato aquí en React y estoy un poco confundido sobre cómo anular las clases en Material UI. Eché un vistazo a los ejemplos y traté de imitarlo, pero no parecía hacer lo que yo quería que hiciera.
Básicamente, en una fila de la tabla, quiero que establezca un color de fondo diferente al que está haciendo actualmente.
Aquí está mi enfoque:
const styles = theme => ({ root: { width: "100%", marginTop: theme.spacing.unit * 3 }, table: { minWidth: 1020 }, tableWrapper: { overflowX: "auto" }, hover: { "&:hover": { backgroundColor: 'rgb(7, 177, 77, 0.42)' } } }); return <TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}> {this.insertRow(n, isSelected, counter, checkbox)};
export default withStyles(styles)(EnhancedTable);¡Gracias por tu ayuda!
Debe definir una clave para TableRow como un nombre de clase y luego colocar su estilo de desplazamiento justo en ese nombre de clase como un objeto.
const styles = theme => ({ ... tr: { background: "#f1f1f1", '&:hover': { background: "#f00", }, }, ... }); return <TableRow className={props.classes.tr} ...>En otro ejemplo sería algo como esto:
const styles = { tr: { background: "#f1f1f1", '&:hover': { background: "#f00", } } }; function Table(props) { return ( <Table> <TableRow className={props.classes.tr}> {"table row"} </TableRow> </Table> ); } export default withStyles(styles)(Table);Si está buscando hacer algunas animaciones de desplazamiento personalizadas, puede probar este estilo
Este bloque de código cambiará el color de una tarjeta al pasar el mouse.
Para obtener más información, consulte aquí Transiciones en MUI
card : { transition: theme.transitions.create(["background", "background-color"], { duration: theme.transitions.duration.complex, }), "&:hover": { backgroundColor: "#333", }, }Al agregar una declaración simple, puede personalizar las propiedades de Hover.
'&:hover': { background: "rgb(7, 177, 77, 0.42)", }Asi que,
tableWrapper: { overflowX: "auto", hover: { "&:hover": { backgroundColor: 'rgb(7, 177, 77, 0.42)' }, }