css - 在 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

在您分享的代码中，您有

className={styles.tableRow}

然后

classes={{ 'hover': {color: '#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