web-dev-qa-db-fra.com

Comment changer la couleur de survol de la table des matériaux

J'utilise React et Material UI pour mon application Web. Je veux changer la couleur de survol de la ligne du tableau mais je ne peux pas le faire.

Exemple de code 

x={
  hover:{
    color:'green'
 }
}

<TableRow hover
          key={lead.id} className={classes.row}
          classes={{
                    hover:x.hover
                   }}
          onClick={() => {}}>
reactjsmaterial-ui
6
Nayan Srivastava

J'ai cette solution jusqu'à présent. Peut-être existe-t-il d'autres approches pour remplacer les CSS de tableRow mais celle-ci fonctionne à merveille:

const styles = theme => ({
tableRow: {
    "&:hover": {
      backgroundColor: "blue !important"
    }
  }
});


<TableRow hover
      key={lead.id} className={classes.tableRow}

      onClick={() => {}}>

N'hésitez pas à poser n'importe quelle question.

2
Sakhi Mansoor
tableRow: {
    hover: {
        "&$hover:hover": {
            backgroundColor: '#49bb7b',
        },
    },
}

<TableRow className={classes.tableRow} key={n.id} hover onClick={event => this.handleClick(event)}>Text</TableRow>
0
Ulthane

Vous pouvez maintenir la dépendance sur le prop de survol de l'interface utilisateur de matériau en utilisant

hover: {
  '&:hover': {
    backgroundColor: 'green !important',
  },
},
0
Julie

Si vous utilisez des styles, vous pouvez simplement le remplacer dans l'élément racine comme ceci:

Voici un exemple de procédure: https://codesandbox.io/s/724911117670

0
xygZen