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样式所覆盖。