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

Question

I'm using table of material-ui, like this img

When I hover the specific row, the background color will become dark, sometimes one row could have sub-row. I want the sub-row will become darker when I hover.

My design structure is like below, but this way only the selected tablecell being hovered, not all subRow's background color get darker.

I also tried wrappping sub tablecells of subrow into a tablerow/tablecell/div. It doesn't work, is there a better way to achieve this?

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

You can't use a selector when declaring inline styles on an element, as by declaring it inline, you are already selecting this div to apply style. A proper inline style declaration looks like this -> <div style="background:red;"> .
The limitations of this are that you can't use pseudo/state selectors for it like :hover .

To do that, you need to put your style code in a <style></style> block or a separate css file.

An example that assumes your code outputs to the browser as a standard HTML <table> element;

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

Otherwise replace with whatever classes are used to create the table structure, if it doesn't look like it's working, also check that it's not getting overridden by more specific base UI styles.