material-ui 表格多子行不能一起悬停

Posted 2023-02-22

【中文标题】material-ui 表格多子行不能一起悬停

【英文标题】：material-ui table multi subrow can't be hovered together

【发布时间】：2020-12-06 06:30:33

【问题描述】：

我使用的是material-ui表，比如这个img

当我将鼠标悬停在特定行时，背景颜色会变暗，有时一行可能会有子行。 我希望当我悬停时子行会变暗。

我的设计结构如下图，但这样只有选定的表格单元格被悬停，并非所有 subRow 的背景颜色都变暗。

我还尝试将 subrow 的子 tablecells 包装到 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'
 ,
))

【参考方案1】：

在元素上声明内联样式时不能使用选择器，因为通过将其声明为内联，您已经选择了此 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 样式覆盖。

【讨论】：

谢谢，其实我是用makeStyle做CSS工作的，我用内联样式只是因为我觉得它更容易理解，我只是修改了代码