我是React的新手,我对如何覆盖Material UI中的类有些困惑。我看了看这些示例并尝试模仿它,但是它似乎并没有按照我的意愿去做。
基本上,我希望在表格行悬停时,将其设置为不同于当前操作的背景色。
这是我的方法:
const styles = theme => ({
root: {
width: "100%",
marginTop: theme.spacing.unit * 3
},
table: {
minWidth: 1020
},
tableWrapper: {
overflowX: "auto"
},
hover: {
"&:hover": {
backgroundColor: 'rgb(7, 177, 77, 0.42)'
}
}
});
return <TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}>
{this.insertRow(n, isSelected, counter, checkbox)}
;
export default withStyles(styles)(EnhancedTable);
感谢您的帮助!
答案 0 :(得分:3)
您应该将TableRow的键定义为className,然后将鼠标悬停样式放在该类名称上作为对象。
const styles = theme => ({
...
tr: {
background: "#f1f1f1",
'&:hover': {
background: "#f00",
},
},
...
});
return <TableRow className={props.classes.tr} ...>
在另一个示例中,将是这样的:
const styles = {
tr: {
background: "#f1f1f1",
'&:hover': {
background: "#f00",
}
}
};
function Table(props) {
return (
<Table>
<TableRow className={props.classes.tr}>
{"table row"}
</TableRow>
</Table>
);
}
export default withStyles(styles)(Table);
答案 1 :(得分:0)
如果您想制作一些自定义悬停动画,则可以尝试这种风格
此代码块将在悬停时更改卡的颜色。
有关更多信息,请在这里Transitions in MUI
card : {
transition: theme.transitions.create(["background", "background-color"], {
duration: theme.transitions.duration.complex,
}),
"&:hover": {
backgroundColor: "#333",
},
}
答案 2 :(得分:0)
通过添加一个简单的语句,您可以自定义悬停属性..
'&:hover': {
background: "rgb(7, 177, 77, 0.42)",
}
所以,
tableWrapper: {
overflowX: "auto",
hover: {
"&:hover": {
backgroundColor: 'rgb(7, 177, 77, 0.42)'
},
}