自定义悬停样式

我是一个新手，在这里反应，我有点困惑，如何覆盖材料用户界面类。我看了一下这些例子，试图模仿它，但它似乎并没有做我想让它做的事情。

基本上，在一个表行悬停，我想让它设置一个背景颜色不同于它目前正在做的事情。

我的方法是:

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);

谢谢你的帮助！

192476 次浏览
小开
最佳答案

You should define a key for TableRow as a className and then put your hover style right on that class name as an object.

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);
小开

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

card : {
transition: theme.transitions.create(["background", "background-color"], {
duration: theme.transitions.duration.complex,
}),
"&:hover": {
backgroundColor: "#333",
},
}
小开

By Adding A simple Statement you can customize Hover properties..

'&:hover': {
background: "rgb(7, 177, 77, 0.42)",
             

}

So,

tableWrapper: {
overflowX: "auto",
  

hover: {
"&:hover": {
backgroundColor: 'rgb(7, 177, 77, 0.42)'
},
}
小开

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. When the checkbox is 'checked', the on-hover background color get's over-ridden.

I am using material UI version 4


提交答案