title: Set Material UI Table cell background colour based on cell value using Javascript?
body: <p>This may be a basic question, but i cant wrap my head around it. I am using React and JS and would like to change the background of the &quot;Charge Left&quot; cell based on the value of the cell. E.G. if charge &lt; 30 Background is red, if charge is 31 - 59 background is orange, if charge is &gt; 59 background is green.</p>
  <p>I have tried multiple different solutions in JS an i can't get it to work at all.</p>
  <p><code>&lt;StyledTableCell align=&quot;center&quot;&gt;{user.chargeLeft}&lt;/StyledTableCell&gt;</code></p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import &quot;./colorChange.jsx&quot;;
  import Amplify, { API, graphqlOperation } from &quot;aws-amplify&quot;;
  import awsconfig from &quot;./aws-exports&quot;;
  import { AmplifySignOut, withAuthenticator } from &quot;@aws-amplify/ui-react&quot;;
  import { listChargeProfiles } from &quot;./graphql/queries&quot;;
  
  import logo from &quot;./evslogo.png&quot;;
  
  import { Paper } from &quot;@material-ui/core&quot;;
  import { withStyles, makeStyles } from &quot;@material-ui/core/styles&quot;;
  import Table from &quot;@material-ui/core/Table&quot;;
  import TableBody from &quot;@material-ui/core/TableBody&quot;;
  import TableCell from &quot;@material-ui/core/TableCell&quot;;
  import TableContainer from &quot;@material-ui/core/TableContainer&quot;;
  import TableHead from &quot;@material-ui/core/TableHead&quot;;
  import TableRow from &quot;@material-ui/core/TableRow&quot;;
  
  Amplify.configure(awsconfig);
  
  function App() {
    const StyledTableCell = withStyles(theme =&gt; ({
      head: {
        backgroundColor: theme.palette.common.black,
        color: theme.palette.common.white,
        fontSize: 18,
        fontWeight: &quot;bold&quot;
      },
      body: {
        fontSize: 16
      }
    }))(TableCell);
  
    const StyledTableRow = withStyles(theme =&gt; ({
      root: {
        &quot;&amp;:nth-of-type(odd)&quot;: {
          backgroundColor: theme.palette.action.hover
        }
      }
    }))(TableRow);
  
    const [users, setUsers] = useState([]);
  
    useEffect(() =&gt; {
      fetchUserData();
    }, []);
  
    const fetchUserData = async () =&gt; {
      try {
        const userData = await API.graphql(graphqlOperation(listChargeProfiles));
        const userList = userData.data.listChargeProfiles.items;
        setUsers(userList);
      } catch (error) {
        console.log(&quot;Failed to Return Users.&quot;, error);
      }
    };
  
    const useStyles = makeStyles({
      table: {
        minWidth: 700
      }
    });
  
    const classes = useStyles();
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;header className=&quot;evs-header&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            {/* EVS Logo */}
            &lt;img src={logo} alt=&quot;Evs Energy Logo&quot; className=&quot;logoEvs&quot; /&gt;
            &lt;div className=&quot;vertical-divider&quot;&gt;&lt;/div&gt;
            &lt;p className=&quot;charge-text&quot;&gt;
              Charging &lt;br /&gt;
              Profile
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;AmplifySignOut /&gt;
        &lt;/header&gt;
        {/* Page Divider */}
        &lt;div className=&quot;evs-header-bar&quot;&gt;&lt;/div&gt;
        &lt;TableContainer component={Paper}&gt;
          &lt;Table className={classes.table} aria-label=&quot;customized table&quot;&gt;
            &lt;TableHead&gt;
              &lt;TableRow&gt;
                &lt;StyledTableCell align=&quot;center&quot;&gt;First Name&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align=&quot;center&quot;&gt;Last Name&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align=&quot;center&quot;&gt;Email&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align=&quot;center&quot;&gt;Car Model&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align=&quot;center&quot;&gt;Charge Level&lt;/StyledTableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableHead&gt;
            &lt;TableBody&gt;
              {users.map(user =&gt; (
                &lt;StyledTableRow&gt;
                  &lt;StyledTableCell align=&quot;center&quot;&gt;
                    {user.firstName}
                  &lt;/StyledTableCell&gt;
                  &lt;StyledTableCell align=&quot;center&quot;&gt;
                    {user.lastName}
                  &lt;/StyledTableCell&gt;
                  &lt;StyledTableCell align=&quot;center&quot;&gt;{user.email}&lt;/StyledTableCell&gt;
                  &lt;StyledTableCell align=&quot;center&quot;&gt;
                    {user.carModel}
                  &lt;/StyledTableCell&gt;
                  &lt;StyledTableCell align=&quot;center&quot;&gt;
                    {user.chargeLeft}
                  &lt;/StyledTableCell&gt;
                &lt;/StyledTableRow&gt;
              ))}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/TableContainer&gt;
  
        {/* Footer Section */}
        &lt;footer className=&quot;evs-footer&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;p className=&quot;footer-text&quot;&gt;About&lt;/p&gt;
            &lt;p className=&quot;footer-text&quot;&gt;Help Centre&lt;/p&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
      // &lt;/div&gt;
    );
  }
  </code></pre>