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

Graeme 发表于 Dev

格莱美

一直在绕圈转。显然，我并没有完全理解Material-ui中类重写的工作方式。

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

目前，我正在尝试...

<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提供给classes属性的键对于TableRow无效。您需要提供一个非空字符串，而不是：[object Object]。

帮助表示赞赏。谢谢。

布斯本杰明

在您共享的代码中，

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。