问是否使用Javascript根据单元格值设置物料UI表单元格背景颜色？

EN

import React, { useEffect, useState } from "react";
import "./App.css";
import "./colorChange.jsx";
import Amplify, { API, graphqlOperation } from "aws-amplify";
import awsconfig from "./aws-exports";
import { AmplifySignOut, withAuthenticator } from "@aws-amplify/ui-react";
import { listChargeProfiles } from "./graphql/queries";

import logo from "./evslogo.png";

import { Paper } from "@material-ui/core";
import { withStyles, 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";

Amplify.configure(awsconfig);

function App() {
  const StyledTableCell = withStyles(theme => ({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
      fontSize: 18,
      fontWeight: "bold"
    },
    body: {
      fontSize: 16
    }
  }))(TableCell);

  const StyledTableRow = withStyles(theme => ({
    root: {
      "&:nth-of-type(odd)": {
        backgroundColor: theme.palette.action.hover
      }
    }
  }))(TableRow);

  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUserData();
  }, []);

  const fetchUserData = async () => {
    try {
      const userData = await API.graphql(graphqlOperation(listChargeProfiles));
      const userList = userData.data.listChargeProfiles.items;
      setUsers(userList);
    } catch (error) {
      console.log("Failed to Return Users.", error);
    }
  };

  const useStyles = makeStyles({
    table: {
      minWidth: 700
    }
  });

  const classes = useStyles();

  return (
    <div className="App">
      <header className="evs-header">
        <div className="container">
          {/* EVS Logo */}
          <img src={logo} alt="Evs Energy Logo" className="logoEvs" />
          <div className="vertical-divider"></div>
          <p className="charge-text">
            Charging <br />
            Profile
          </p>
        </div>
        <AmplifySignOut />
      </header>
      {/* Page Divider */}
      <div className="evs-header-bar"></div>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="customized table">
          <TableHead>
            <TableRow>
              <StyledTableCell align="center">First Name</StyledTableCell>
              <StyledTableCell align="center">Last Name</StyledTableCell>
              <StyledTableCell align="center">Email</StyledTableCell>
              <StyledTableCell align="center">Car Model</StyledTableCell>
              <StyledTableCell align="center">Charge Level</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {users.map(user => (
              <StyledTableRow>
                <StyledTableCell align="center">
                  {user.firstName}
                </StyledTableCell>
                <StyledTableCell align="center">
                  {user.lastName}
                </StyledTableCell>
                <StyledTableCell align="center">{user.email}</StyledTableCell>
                <StyledTableCell align="center">
                  {user.carModel}
                </StyledTableCell>
                <StyledTableCell align="center">
                  {user.chargeLeft}
                </StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      {/* Footer Section */}
      <footer className="evs-footer">
        <div className="container">
          <p className="footer-text">About</p>
          <p className="footer-text">Help Centre</p>
        </div>
      </footer>
    </div>
    // </div>
  );
}