我正在使用React和Material UI作为我的Web应用程序。我想更改表格行的悬停颜色,但无法执行此操作。
示例代码:
x={
hover:{
color:'green'
}
}
<TableRow
hover
key={lead.id} className={classes.row}
classes={{
hover:x.hover
}}
onClick={() => {}}
>
字符串
我正在使用React和Material UI作为我的Web应用程序。我想更改表格行的悬停颜色,但无法执行此操作。
示例代码:
x={
hover:{
color:'green'
}
}
<TableRow
hover
key={lead.id} className={classes.row}
classes={{
hover:x.hover
}}
onClick={() => {}}
>
字符串
9条答案
按热度按时间r7s23pms1#
到目前为止我已经有了这个解决方案。也许还有其他方法可以覆盖tableRow的css,但这一个很有魅力:
字符串
有什么问题可以问。
b4lqfgs42#
这是MUI v5中的一个简单的任务。请参阅此处的文档:
字符串
现场演示
的数据
np8igboo3#
字符串
velaa5lx4#
implementation of the TableRow component和customizingcomponents页面显示,您需要重写两个类root.hover:hover和.hover来更改悬停颜色。
字符串
然后在你的组件中,你可以将样式应用到类中。
型
f87krz0w5#
以防万一,如果您正在使用组件覆盖并且想要执行样式覆盖,您必须以根为目标,而不是悬停规则。我花了相当长的一段时间试图让pseudo:hover在这上面工作,但它永远不会工作。
这是我有的。
字符串
使用这个是你想在主题级别覆盖组件与样式覆盖,sx或useStyles。
taor4pac6#
您可以使用
字符串
qncylg1j7#
只在TableRow中放置hover,而不是头TableRow
字符串
@material-ui/core/TableRow已经内置了处理悬停的代码,它对我很有效。
bsxbgnwa8#
如果你使用的是withstyles,你可以像这样在根元素中覆盖它:
如何做到这一点的一个例子是在这里:https://codesandbox.io/s/7249117670
hrirmatl9#
通常,使用MUI比添加每个组件覆盖更好的方法是找到哪个主题变量负责我们想要实现的效果并覆盖该变量。
很可能你的表格行、列表项、菜单项和其他项都应该有一致的悬停背景色。如果是这种情况,您可以覆盖
palette.action.hover