I would like to change the default hover color of a MUI TableRow by adding styles to the TableRow.

This question has been asked before, but the solutions are 3-4 years old, and they aren't working for me in my case. The docs also make it seem like there shouldn't be such arduous workarounds to achieve the goal.

The most relevant thread regarding solutions is here. At best, I can change the color of the hover for a cell, but not the whole row.

Below is my code; included you will find all of my attempts commented out:

import React, { Dispatch, SetStateAction, useCallback } from 'react';
import { makeStyles, TableCell, TableRow } from '@material-ui/core';
import EditIcon from '../../assets/common/edit-icon.svg';
import { Link } from 'react-router-dom';
import { COLORS } from '../../constants/theme';
import { format } from 'date-fns';
import { Box } from '@material-ui/core';


const useStyles = makeStyles(theme => ({
  tableRow: {
    '& .MuiTableCell-root': {
      borderRight: `1px solid ${theme.palette.grey[200]}`,
      borderBottom: 'none',
      padding: 5,
      paddingTop: 8,
      paddingBottom: 8,
      cursor: 'pointer',
      minWidth: 25,
      //this works but only for cell hover, not the full row
      // "&:hover": {
      //   backgroundColor: `${COLORS.BLUE} !important`,
      // },
    },
    //this doesn't work
    // hover: {
    //   backgroundColor: `${COLORS.BLUE} !important`
    // },
    //this doesn't work
    // '& .MuiTableRow-hover': {
    //   backgroundColor: `${COLORS.BLUE} !important`
    // },
    //this doesn't work
    // hover: {
    //   "&:hover": {
    //     backgroundColor: "green !important",
    //   },
    // },
    //this doesn't work
    // root: {
    //   '&:hover': {
    //     backgroundColor: `${COLORS.BLUE} !important`
    //   },
    // },
    //this doesn't work
    // '& .MuiTableRow-hover': {
    //   backgroundColor: `${COLORS.BLUE} !important`
    // },
    //this doesn't work
    // MuiTableRow: {
    //   root: {
    //     '&:hover': {
    //       backgroundColor: `${COLORS.BLUE} !important`,
    //     }
    //   }
    // },
    //this doesn't work
    // '& .MuiTableRow-root': {
    //   hover: { backgroundColor: "green !important" }
    // },
    // root: {
    //   '&:hover': {
    //     backgroundColor: `${COLORS.BLUE} !important`
    //   },
    // },

    '& .MuiTableCell-root:first-child': {
      border: 'none'
    },
  },
  selectedRow: {
    backgroundColor: `${COLORS.BLUE} !important`,
    '& .MuiTableCell-root': {
      color: COLORS.WHITE
    }
  },
  editIcon: {
    backgroundImage: `url(${EditIcon})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    width: 18,
    height: 18
  }
}));

interface IProps extends Omit<unknown, 'children'> {
  children?: React.ReactNode;
  isSelected: boolean;
  redirectTo: string;
  onSelect: Dispatch<SetStateAction<string>>;
  cells: Array<string | number | Date | boolean | null | undefined>;
  id: string;
}

const TableRowComponent = ({
  isSelected,
  onSelect,
  redirectTo,
  cells,
  id
}: IProps): JSX.Element => {
  const classes = useStyles();

  const getCorrectFormat = useCallback(
    cell => {
      return cell instanceof Date
        ? format(cell as Date, "MM/dd/yyyy hh:mmaaaaa'm'")
        : cell;
    },
    [cells]
  );

  return (
    <TableRow
      className={classes.tableRow}
      classes={{ selected: classes.selectedRow }}
      selected={isSelected}
      onClick={() => onSelect(id)}
      hover={true}
    >
      <TableCell align="center">
        {isSelected && (
          <Link to={redirectTo}>
            <div className={classes.editIcon} />
          </Link>
        )}
      </TableCell>
      {cells.map(cell => (

        <TableCell key={(id   Math.random()).toString()} align="center">
          <Link to={redirectTo}>
            <Box>
              {cell || cell === 0 ? getCorrectFormat(cell) : 'null'}
            </Box>
          </Link>
        </TableCell>
      ))
      }
    </TableRow >
  );
};

export default TableRowComponent;

Thanks for your help!

CodePudding user response：

Using MUI v5.3.0:

You can change the color with the sx property like this:

<TableRow
  sx={{
    '&.MuiTableRow-hover': {
      '&:hover': {
        backgroundColor: 'papayawhip',
      },
    },
  }}
  hover
>
  ...
</TableRow>

haven't tried it but I guess you can use this as well in your useStyles

CodePudding user response：

check with below method. tested in MuiV5 and working for me. adjust according to your need. also you dont need to add hover={true} just hover is sufficient.

Option1 : with sx props

<TableRow
  ...
  hover
  sx={{
    '&.MuiTableRow-root:hover':{
      backgroundColor: 'red' 
    },
   }}
>
  ...
</TableRow>

option 2: with useStyles

const useStyles = makeStyles(theme => ({
  tableRow: {
    ...
    '&.MuiTableRow-root:hover':{
      backgroundColor: 'red' ,
    },
  },
}));