webentwicklung-frage-antwort-db.com.de

So ändern Sie die Schwebefarbe des Materials in der Ui-Tabelle

Ich verwende React und Material UI für meine Webanwendung. Ich möchte die Schwebefarbe der Tabellenzeile ändern, kann dies aber nicht.

Beispielcode 

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

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

Ich habe diese Lösung bisher. Vielleicht gibt es andere Ansätze, um css von tableRow zu überschreiben, aber dieser funktioniert wie ein Zauber:

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


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

      onClick={() => {}}>

Fühlen Sie sich frei, um Fragen zu stellen.

2
Sakhi Mansoor

bewegen Sie den Mauszeiger einfach in die TableRow, aber nicht in die Überschrift Tablerow

 <StyledTableRow hover key={row.name}>

@ material-ui/core/TableRow hat Code für den Umgang mit Hover eingebaut, das hat bei mir funktioniert.

0
artworkjpm
tableRow: {
    hover: {
        "&$hover:hover": {
            backgroundColor: '#49bb7b',
        },
    },
}

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

Sie können die Abhängigkeit von der Material-UI-Hover-Eigenschaft beibehalten, indem Sie verwenden

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

Wenn Sie withstyles verwenden, können Sie es einfach wie im Wurzelelement überschreiben:

Ein Beispiel dafür ist: https://codesandbox.io/s/7249117670

0
xygZen