Блог

Я использую таблицу пользовательского интерфейса материалов для сопоставления данных из 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. Я хочу установить разные цвета для каждого индикатора выполнения для каждой строки.