一旦选中一个，在所有TableRow元素上显示复选框

Question

我有一个材质用户界面表，我正在向其中添加多选功能。我的要求如下。

• Checkbox es最初都是隐藏的。 -完成
• 当悬停在一行上时，其复选框出现。 DONE
• 一旦检查了一个Checkbox，然后其他行上的所有Checkbox元素将变得始终可见。

我已经完成了前两个要求，但我正在为最后一个要求而苦苦挣扎。

一旦选中其中任何一个复选框，如何显示所有复选框（通过更改opacity？

这是到目前为止我要去的地方：

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";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles({
  rowIconStyle: {
    minWidth: 50,
    minHeight: 50
  },
  tableRowStyle: {
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "darkGrey"
    }
  },
  rowSelectionCheckboxStyle: {
    //opacity: "calc(var(--oneRowSelected))",
    opacity: 0,
    "$tableRowStyle:hover &": {
      opacity: 1
    }
  }
});

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>
              <Checkbox className={styles.rowSelectionCheckboxStyle} />
            </TableCell>
            <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>
                  <Checkbox className={styles.rowSelectionCheckboxStyle} />
                </TableCell>
                <TableCell>{iconElement}</TableCell>
                <TableCell>{row.projectName}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

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

Answer 1

以样式CSS形式输入

.MuiCheckbox-colorSecondary.Mui-checked {
  opacity: 1 ;
}