Question

对此感兴趣。显然，我没有完全理解Material-ui中类重写的工作方式。

我尝试了以下答案： CSS on Material UI components 但这没有用（没有错误），可能是因为我使用的是有状态组件，而不是示例中的无状态组件。

目前我正在尝试...

<TableRow className={styles.tableRow}
    key={n.id} hover
    onClick={event => this.handleRowClick(event, n.id)}
    classes={{ 'hover': {color: '#7EA5FF'}}} >
      <TableCell>&nbsp;</TableCell>
      <TableCell>{n.title}</TableCell>
      <TableCell>{n.author}</TableCell>
</TableRow>

但是我得到这个错误：提供给classes属性的键hover对TableRow无效。您需要提供一个非空字符串，而不是：[object Object]。

帮助表示赞赏。谢谢。

Answer 1

在您共享的代码中，您拥有

className = {styles.tableRow}

然后

classes = {{'hover'：{color：'＃7EA5FF'}}}

您应该将样式修改放入styles.tableRow的声明中，并删除道具className，因为它似乎不在api中。 https://material-ui.com/api/table-row/

类似的东西：

const styles = theme => ({
     tableRow: {
      hover: {
         /// your styles...
        }
     }
});
....

render() {
 // I think you should use the props classes, because it's the name of 
 // the props to get the style from the function HOC withStyles of MUI
 const classes = this.props.classes;
 return (
   <TableRow
    classes={classes.tableRow}
    key={n.id} hover
    onClick={event => this.handleRowClick(event, n.id)}
>
      <TableCell>&nbsp;</TableCell>
      <TableCell>{n.title}</TableCell>
      <TableCell>{n.author}</TableCell>
</TableRow>
 );
}

如果您在沙盒中或类似的内容中共享组件的所有代码，我可以为您提供更多帮助。我需要查看您在声明样式的变量，还需要查看如何将其传递给组件。

这是因为material-ui基于JSS来对组件进行样式设置。当您不熟悉它时，这会令人不安。

这是您案件的一个很好的例子

https://material-ui.com/demos/tables/#customized-tables

这也是一个很好的文档

https://material-ui.com/customization/overrides/#overriding-with-classes

Answer 2

const useStyles = makeStyles((theme) => ({
  hover: {
    "&:hover": {
      backgroundColor: "green !important",
    },
  },
}));

 const classes = useStyles();
<TableRow hover classes={{hover: classes.hover,}}/>

Answer 3

const styles = (theme) => ({
tableRow: {
    "&:hover": {
      backgroundColor: '#7EA5FF'
    }
  }
});

const classes = useStyles();

<TableRow hover className={classes.tableRow}>

在React的Material-ui上覆盖TableRow悬停CSS

3 个答案: