Можно ли изменить цвет значка в столбце TableRow при наведении курсора в любом месте этой строки?

Question

Я использую материал-интерфейс 4.9.5.

Я сделал урезанный пример моей проблемы здесь. У меня есть Table, который я заполняю простыми JSON данными. Каждая строка данных выглядит следующим образом:

{
      icon: {
         {
              iconElement: FolderIcon,
              color: "red",
              hoverColor: "green"
         }
      },
      projectName: "Project1"
}

Таким образом, каждая строка может иметь свой собственный значок и свой собственный цвет и цвет при наведении.

Что меня действительно беспокоит, так это как получить цвет при наведении курсора на отдельную иконку, которая срабатывает, когда пользователь наводит курсор в любом месте этого ряда?

У меня есть триггер для написанной строки и изменение фона при наведении курсора. Я не могу понять, как заставить значок меняться при наведении курсора. Это то, что я имею до сих пор:

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles({
  rowIconStyle: {
    minWidth: 50,
    minHeight: 50
  },
  tableRowStyle: {
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "darkGrey"
    }
  }
});

export default function MyTableComponent(props) {
  const styles = useStyles();
  const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";
  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Icon</TableCell>
            <TableCell>Name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.tableRowsData.map(row => {
            const RowIcon =
              row.icon && row.icon.iconElement
                ? row.icon.iconElement
                : () => <div />;
            let iconElement = (
              <RowIcon
                className={styles.rowIconStyle}
                style={{
                  color:
                    row.icon && row.icon.color
                      ? row.icon.color
                      : DEFAULT_TABLE_ROW_ICON_COLOR
                }}
              />
            );
            return (
              <TableRow key={row.name} className={styles.tableRowStyle}>
                <TableCell>{iconElement}</TableCell>
                <TableCell>{row.projectName}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

MyTableComponent.propTypes = {
  tableRowsData: PropTypes.array
};

Любые предложения очень ценятся.

Answer 1

Поскольку вы указали, что вам не нужно поддерживать IE, вы можете использовать CSS переменных . Это особенно полезно, поскольку вы управляете цветами наведения в виде данных, и каждый значок может иметь свой цвет для наведения.

Первый шаг - предоставить два цвета, которые вам нужны для каждого значка, в качестве пользовательских CSS свойств. (--icon-color и --hover-icon-color ниже):

            const RowIcon =
              row.icon && row.icon.iconElement
                ? row.icon.iconElement
                : () => <div />;
            const iconColor =
              row.icon && row.icon.color
                ? row.icon.color
                : DEFAULT_TABLE_ROW_ICON_COLOR;
            const iconHoverColor =
              row.icon && row.icon.hoverColor ? row.icon.hoverColor : iconColor;
            let iconElement = (
              <RowIcon
                className={styles.rowIconStyle}
                style={{
                  "--icon-color": iconColor,
                  "--hover-icon-color": iconHoverColor
                }}
              />

Затем вы можете использовать эти CSS свойства в вашем CSS:

const useStyles = makeStyles({
  rowIconStyle: {
    minWidth: 50,
    minHeight: 50,
    color: "var(--icon-color)",
    "$tableRowStyle:hover &": {
      color: "var(--hover-icon-color)"
    }
  },
  tableRowStyle: {
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "darkGrey"
    }
  }
});

Связанный ответ: Как изменить стиль дочернего элемента при наведении курсора на родителя с использованием материалов-стилей jss

Answer 2

Обнаружил, что не уверен, что это решит вашу проблему, но вы можете попробовать за столом

<TableBody>
{data.map((row, index) => (
     <TableRow key={index} style={{ padding: '5px 20px', height: 25, ...this.getStripedStyle(index) }}>
           ....Columns
     </TableRow>
))}
</TableBody>

Получить полосатый стиль

  getStripedStyle(index) {
    return { background: colorArr[index] };
  }