如何解决material-ui表多子行不能一起悬浮
我正在使用material-ui表,例如img
当我将鼠标悬停在特定行上时,背景颜色会变暗,有时一行可能会有子行。 我希望将鼠标悬停时子行会变暗。
我的设计结构如下所示,但这种方式仅使选定的表格单元悬停,而不是所有subRow的背景颜色都变深。
我还尝试将subrow的子tablecell封装到tablerow / tablecell / div中。它不起作用,有没有更好的方法来实现这一目标?
import { Table,TableHead,TableRow,TableCell,TableBody,Divider,makeStyles} from '@material-ui/core'
export default Table = () => {
const subRow=[{a:'test1',b:1},{a:'test2',b:2}]
const tableClasses = useStyles()
return(
<Table>
<TableHead>
<TableRow>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>WER</TableCell>
<TableCell> 234</TableCell>
<TableCell>
{subRow.map((e,index) => {
return (
<div className={tableClasses.subRow}>
<div> {e.a} </div>
{index < subCells.length - 1 && <Divider />}
</div>
);
})}
</TableCell>
<TableCell>
{subRow.map((e,index) => {
return (
<div className={tableClasses.subRow}>
<div> {e.a} </div>
{index < subCells.length - 1 && <Divider />}
</div>
);
})}
</TableCell>
</TableRow>
</TableBody>
</Table>;
)
const useStyles = makeStyles(() => ({
subRow:{
'&:hover':{
backgroundColor: 'red'
}},}))
}
解决方法
在元素上声明内联样式时,不能使用选择器,因为通过内联声明它已经选择了该div来应用样式。正确的内联样式声明如下所示-> <div style="background:red;">
。
这样做的局限性在于您不能像:hover
那样使用伪/状态选择器。
为此,您需要将样式代码放入<style></style>
块或单独的CSS文件中。
假设您的代码作为标准HTML <table>
元素输出到浏览器的示例;
<style>
table tbody td:hover {background-color:red;}
/* or if you want to keep it to the div... */
table tbody td div:hover {background-color:red;}
</style>
否则,请替换用于创建表结构的任何类,如果它看起来不起作用,还请检查它是否不会被更特定的基本UI样式所覆盖。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。