使用Javascript根据单元格值设置材质UI表格单元格背景颜色？

这可能是一个基本的问题，但我不能绕着它转。我正在使用React和JS，希望根据单元格的值更改“Charge Left”单元格的背景。例如，如果电荷<30，背景为红色，如果电荷为31-59，背景为橙色，如果电荷>59，背景为绿色

我在JSAN中尝试了多种不同的解决方案，但我根本无法让它工作

{user.chargeLeft}

import React，{useffect，useState}来自“React”；
导入“/App.css”；
导入“/colorChange.jsx”；
从“aws Amplify”导入Amplify，{API，graphqlOperation}；
从“/aws导出”导入awsconfig；
从“@aws amplify/ui react”导入{AmplifySignOut，withAuthenticator}”；
从“/graphql/querys”导入{listChargeProfiles}；
从“/evslogo.png”导入徽标；
从“@material ui/core”导入{Paper}”；
从“@material ui/core/styles”导入{withStyles，makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
放大、配置（awsconfig）；
函数App（）{
const StyledTableCell=带有样式（主题=>({
负责人：{
背景色：theme.palette.common.black，
颜色：theme.palette.common.white，
尺码：18，
fontWeight：“粗体”
},
正文：{
字体大小：16
}
}))（表细胞）；
const StyledTableRow=带有样式（主题=>({
根目录：{
“&：第n个类型（奇数）”：{
背景色：theme.palete.action.hover
}
}
}))（表行）；
const[users，setUsers]=useState（[]）；
useffect（（）=>{
fetchUserData（）；
}, []);
const fetchUserData=async（）=>{
试一试{
const userData=await API.graphql（graphql操作（listChargeProfiles））；
const userList=userData.data.listChargeProfiles.items；
设置用户（userList）；
}捕获（错误）{
console.log（“返回用户失败”，错误）；
}
};
const useStyles=makeStyles({
表:{
最小宽度：700
}
});
const classes=useStyles（）；
返回(
{/*电动汽车标志*/}

充电

轮廓

{/*页分隔符*/}
名字
姓
电子邮件
汽车模型
电荷水平
{users.map（user=>(
{user.firstName}
{user.lastName}
{user.email}
{user.carModel}
{user.chargeLeft}
))}
{/*页脚部分*/}
关于
帮助中心

// 
);
}

我为StyledTableCell创建了一个新文件并定义了样式。请注意，您可以在makeStyles中使用道具来更改依赖于道具的样式

此外，还可以通过类属性将根类传递给TableCell

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/TableCell”导入TableCell；
const useStyles=makeStyles（（主题）=>({
根目录：{
背景：（道具）=>{
如果（道具费用=31和道具费用5
返回“绿色”；
}
},
},
}));
const StyledTableCell=（道具）=>{
常量类=使用样式2（道具）；
返回(
{props.children}
);
};
导出默认样式表单元格；

然后，在主文件中，将电荷道具传递给新组件：

。。。
从“/StyledTableCell”导入StyledTableCell；
...
{user.chargeLeft}

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