更改TableRowMUI的默認懸停顏色

我想通過向 TableRow 添加樣式來更改 MUI TableRow 的默認懸停顏色。

這個問題以前曾被問過，但解決方案已有 3-4 年的歷史，就我而言，它們對我不起作用。這些檔案還讓人覺得不應該有如此艱巨的變通辦法來實作目標。

關于解決方案的最相關執行緒在這里。充其量，我可以更改單元格的懸停顏色，但不能更改整行。

以下是我的代碼；包括在內，你會發現我所有的嘗試都被注釋掉了：

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;

謝謝你的幫助！

uj5u.com熱心網友回復：

使用 MUI v5.3.0：

您可以使用如下屬性更改顏色sx：

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

沒試過，但我想你也可以在你的 useStyles

uj5u.com熱心網友回復：

用下面的方法檢查。在 MuiV5 中測驗并為我作業。根據您的需要進行調整。你也不需要添加hover={true}就hover足夠了。

選項1：使用 sx 道具

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

選項 2：與 useStyles

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

標籤：

上一篇：來自getStaticProps的下一個Js背景關系引數回傳“{locales:undefined,locale:undefined,defaultLocale:undefined}”

下一篇：JavaScript：從物件陣列中過濾掉鍵