Question 227829 in CSS Question posted in
Some basic documentation can be found here.

Css – Material UI, row background color with different cell background

I have a Material UI table in React 18 and each cell has a different background color. However this will break the hover style on the row and I am not able to find a solution.

Just to be clear you can check here what I want to achieve: https://explain.depesz.com/s/dFJ2

If you hover on the table’s row you can see that the color just gets darker.

How can I achieve this using React and Material UI? Is there a simple way?

From my Cell component I can set a different color for when it is in hover state, but this will work for single Cell hover not for the entire Row

export const MyCustomCell = (props) => {
    const theme = useTheme();
    return (
        <TableCell
            style={{
                backgroundColor: getCellBackground(props)
            }}
            sx={{
                "&.MuiTableCell-root:hover": {
                    backgroundColor: getCellBackgroundOnHover(props)
                }
            }}
        >
            {betterTiming(prop)}
        </TableCell>
    )
}

 <TableRow
            role="checkbox"
            sx={{
                '&:last-child td, &:last-child th': {border: 0},
                // "&.MuiTableRow-root:hover": {
                //     backgroundColor: "pink !important"
                // }
            }}
            tabIndex={-1}
        >
</TableRow>

EDIT: The color is computed dynamically from props

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Unfortunately I could not find any solution by searching on google and I ended up by just using hover state in React

    const [rowHovered, setRowHovered] = React.useState(false);

   const handleRowHover = () => {
        setRowHovered(true);
    };

    const handleRowLeave = () => {
        setRowHovered(false);
    };

    return (
        <TableRow
            role="checkbox"
            onMouseEnter={handleRowHover}
            onMouseLeave={handleRowLeave}
        >
        <MyCustomCell hovered={rowHovered} />
</TableRow>

    export const MyCustomCell = (props) => {
    const theme = useTheme();

    return (
        <TableCell
            style={{
                backgroundColor: getCellBackgroundColor(props, props.hovered)
            }}
        >
            ...
        </TableCell>
    )
}

    And then getCellBackgroundColor will just calculate the color according to my specific business logic.


  2. 0

    Then Modify MyCustomCell component to use CSS variables for background colors:

    import React from 'react';
import TableCell from '@mui/material/TableCell';

export const MyCustomCell = (props) => {
  const cellStyle = {
    '--cell-background': getCellBackground(),
  };

  return (
    <TableCell
      className="custom-cell"
      style={{
        ...cellStyle,
      }}
    >
      {betterTiming(props)}
    </TableCell>
  );
};

    In your CSS, define the CSS variables and styles for both the cell and row hover:

    .custom-cell {
  --cell-background: transparent; 
  background-color: var(--cell-background);
}


.hoverable-row:hover {
  --cell-background-hover: /* Calculate a darker shade of the cell background color */;
}

.custom-cell:hover {
  background-color: var(--cell-background-hover);
}

    In your TableRow component, add the hoverable-row class:

    <TableRow
  role="checkbox"
  sx={{
    '&:last-child td, &:last-child th': { border: 0 },
  }}
  tabIndex={-1}
  className="hoverable-row"
>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search