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

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>

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

帮助表示赞赏。谢谢。

Answer 1

在您共享的代码中，您有

类名={styles.tableRow}

然后

类={{ '悬停': {颜色: '#7EA5FF'}}

您应该将样式修改放在 styles.tableRow 的声明中，并删除 props 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