如何为 table Material UI 中第一列的选定单元格设置样式

Question

我正在处理来自 this codesandbox 的 material ui table 如果选择的单元格如下图所示，我将尝试从 table 中的第一列更改单元格的样式。

显然，我做错了什么，但我不知道是什么。如何仅设置 table 中所选单元格的样式而不设置整行的样式？提前致谢。

Answer 1

您正在将 className={classes.tableCell} 应用于所有 <TableCell />。您只需将其应用于第一个。

import React, { useState } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const styles = (theme) => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  },
  table: {
    minWidth: 700
  },
  tableRow: {
    "&$selected, &$selected:hover": {
      backgroundColor: "white"
    }
  },
  tableCell: {
    "$selected &": {
      color: "red",
      backgroundColor: "yellow"
    }
  },
  hover: {},
  selected: {}
});

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

function SimpleTable(props) {
  const { classes } = props;
  const [selectedID, setSelectedID] = useState([]);

  const clickHandler = (id) => {
    const array = [...selectedID];
    const index = array.indexOf(id);
    if (index !== -1) {
      array.splice(index, 1);
      setSelectedID(array);
    } else {
      setSelectedID([...array, id]);
    }
  };

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              hover
              key={row.id}
              onClick={() => {
                clickHandler(row.id);
              }}
              selected={selectedID.includes(row.id)}
              classes={{ hover: classes.hover, selected: classes.selected }}
              className={classes.tableRow}
            >
              <TableCell
                className={classes.tableCell}
                component="th"
                scope="row"
              >
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleTable);

如何为 table Material UI 中第一列的选定单元格设置样式

How to style a selected cell from the first column in the table Material UI

css

html-table

material-ui