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

Question

我正在使用 material-ui 表，就像這個 img

當我 hover 特定行時，背景顏色會變暗，有時一行可以有子行。 我希望子行在 hover 時會變暗。

我的設計結構如下所示，但這樣只有選定的表格單元被懸停，並非所有 subRow 的背景顏色都變暗。

我還嘗試將 subrow 的子表格單元格包裝到 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'
 }},
}))
}

Answer 1

在元素上聲明內聯 styles 時不能使用選擇器，因為通過內聯聲明它，您已經選擇了此 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 styles 覆蓋。