javascript - 如何在 React 中为数据表映射颜色数组？

Question

我正在使用材料 ui 表来映射来自 API 的数据，但每个表行都有一个进度条。我希望能够为进度条提供不同的颜色。这是下面的代码...

const BorderLinearProgress = withStyles((theme) => ({
 
  bar: {
    borderRadius: 5,
    backgroundColor: "red"
    
  },
}))(LinearProgress);




export default function FeatureTwo() {
  
  const [hmoName, setHmoName] = useState([]);
  const [hmoProgress, setHmoProgress] = useState([]);

  const getHmo = async () => {
    try {
      //API call
    } catch (err) {
      console.log(err);
    }
  };

  

  

  return (
    
     
        
        <Table aria-label="customized table">
          <TableHead>
            <TableRow>
              <StyledTableCell align="left">HMO</StyledTableCell>
              <StyledTableCell align="left">Enrollment Progress{''} (Percent %)</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell align="left" >
                {hmoName.map((name, idx) => {
                  return (
                    <button key={idx}>
                      {name}
                    </button>
                  );
                })}
              </TableCell>

              <TableCell align="left" >
                <div>
                 
                    {hmoProgress.map((number, idx) => {
                      return (
                        <div>
                        <div>
                          <span key={idx}>
                            {parseInt(number).toFixed(0)}
                          </span>
                          <span >
                            Progress
                          </span>
                          </div>

                          <span>
                            <BorderLinearProgress
                              variant="determinate"
                              value={parseInt(number).toFixed(0)}
                            />
                          </span>
                        </div>
                        
                      );
                    })}
                  </div>
               
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
     
  );
}

BordeLineProgress 的背景颜色设置为红色，每行中的所有进度条都有 BC 红色。我想为每一行的每个进度条设置不同的颜色。

标签： javascriptreactjs