在React中覆盖Material-ui上的TableRow悬停CSS
在这件事上一直在绕圈子。显然，我没有完全理解类重写在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> </TableCell>
<TableCell>{n.title}</TableCell>
<TableCell>{n.author}</TableCell>
</TableRow>但是我得到了这个错误:提供给hover属性的键类对于TableRow无效。您需要提供一个非空字符串，而不是: Object object。
感谢你的帮助。谢谢。
回答 4
Stack Overflow用户
发布于 2018-08-13 04:24:17
在你分享的代码中，你有
className={styles.tableRow}
然后
颜色{{ 'hover'：{classes=：'#7EA5FF'}}
您应该将您的样式修改放在styles.tableRow的声明中，并删除props api，因为它似乎不在className中。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> </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
Stack Overflow用户
发布于 2020-09-19 01:04:37
const useStyles = makeStyles((theme) => ({
hover: {
"&:hover": {
backgroundColor: "green !important",
},
},
}));
const classes = useStyles();
<TableRow hover classes={{hover: classes.hover,}}/>Stack Overflow用户
发布于 2021-04-19 19:05:12
const useStyles = makeStyles((theme) => ({
tableRow: {
"&:hover": {
backgroundColor: '#7EA5FF'
}
}
}));
const classes = useStyles();
<TableRow hover className={classes.tableRow}>https://stackoverflow.com/questions/51812441
复制相似问题
腾讯云开发者
