[英]MaterialUI Custom Hover Style
I'm a newbie here to React and I'm a little bit confused on how to override classes in Material UI.我是 React 的新手,我对如何在 Material UI 中覆盖类有点困惑。 I took a look at the examples and tried to mimic it but it didn't seem to do what I want it to do.
我查看了这些示例并尝试模仿它,但它似乎并没有按照我的意愿去做。
Basically, on a table row hover, I want to make it set a background color different from what it is currently doing.基本上,在表格行悬停时,我想让它设置与当前所做的不同的背景颜色。
Here is my approach:这是我的方法:
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);
Thanks for your help!谢谢你的帮助!
You should define a key for TableRow as a className and then put your hover style right on that class name as an object.您应该将 TableRow 的键定义为类名,然后将悬停样式作为对象放在该类名上。
const styles = theme => ({
...
tr: {
background: "#f1f1f1",
'&:hover': {
background: "#f00",
},
},
...
});
return <TableRow className={props.classes.tr} ...>
In another example it would be something like this:在另一个示例中,它将是这样的:
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);
By Adding A simple Statement you can customize Hover properties..通过添加一个简单的语句,您可以自定义 Hover 属性..
'&:hover': {
background: "rgb(7, 177, 77, 0.42)",
}
So,所以,
tableWrapper: {
overflowX: "auto",
hover: {
"&:hover": {
backgroundColor: 'rgb(7, 177, 77, 0.42)'
},
}
If you are looking to make some custom hover animations then you can try this style如果您想制作一些自定义悬停动画,那么您可以尝试这种风格
This block of code will change the colour of a card on hover.此代码块将在悬停时更改卡片的颜色。
For more info please check here Transitions in MUI有关更多信息,请在此处查看MUI 中的转换
card : {
transition: theme.transitions.create(["background", "background-color"], {
duration: theme.transitions.duration.complex,
}),
"&:hover": {
backgroundColor: "#333",
},
}
Here is my approach这是我的方法
const checkBoxStyles = () => ({
root: {
'&$checked': {
color: '#4885FB'
},
'&$disabled': {
color: '#96C9FF'
},
'&:hover': {
backgroundColor: '#E4F2FF !important'
}
},
checked: {},
disabled: {
color: '#96C9FF'
}
});
const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);
Just note: If you don't specify !important.请注意:如果您不指定 !important。 When the checkbox is 'checked', the on-hover background color get's over-ridden.
当复选框被“选中”时,悬停背景颜色会被覆盖。
I am using material UI version 4我正在使用材质 UI 版本 4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.