material-ui table multi subrow can't be hovered together

user_13479172 0
Viewed 189

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'
 }},
}))
}
material-ui reactjs css html javascript
1 Answers

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.

user_111959190
Related