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

Issue

I'm working on the material ui table from this codesandbox and I'm trying to change the style of the cell from the first column in the table if the cell is selected to look like this image below.

Apparently, I'm doing something wrong, but I don't know what. How can I style only the selected cell in the table instead of styling the whole row? Thanks in advance.

Solution

You're applying the className={classes.tableCell} to all the <TableCell />. You have to only apply that on the first one.

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

Answered By - Kundan

Answer Checked By - David Marino (PHPFixing Volunteer)