我可以在TableRow列中使图标在悬停在行中的任何位置时更改颜色吗?

问题描述 投票:0回答:1

我正在使用material-ui 4.9.5。

我在这里做了一个简化的例子。我有一个Table,其中填充了一些简单的JSON数据。每行数据如下所示:

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

因此,每一行都可以具有自己的图标以及其自身的颜色和悬停颜色。

enter image description here

我真正在努力的是如何获得当用户将鼠标悬停在该行中的任何位置时,单个图标的悬浮颜色触发的颜色?

我为行编写了悬停触发器,并在悬停时触发了背景更改。我无法弄清楚如何在悬停时更改图标。这是我到目前为止所拥有的:

Edit icon-hover-color-table-row

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
};

非常感谢任何建议。

javascript html css reactjs material-ui
1个回答
0
投票

发现这不确定是否可以解决您的问题,但是您可以尝试用于表格

<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] };
  }
© www.soinside.com 2019 - 2024. All rights reserved.