Javascript 材料界面芯片阵列

我正在为ReactJS组件编写一些代码，使其具有一个芯片阵列。我希望每个芯片的样式都是唯一的，所以我为每个芯片设置了一个makeStyles类。我在试图找出如何更改每个标记的类时遇到了困难。到目前为止，我得到的是：

    const classes = useStyles();
      const [chipData, setChipData] = React.useState([
        { key: 0, label: 'Heating' },
        { key: 1, label: 'Printing' },
        { key: 2, label: 'Resetting' },
        { key: 3, label: 'Idle' },
        { key: 4, label: 'Suspended' },
        { key: 5, label: 'Suspend in Progress' },
        { key: 6, label: 'Attention - Printer Connection Lost' },
        { key: 7, label: 'Attention - Filament Out' },
        { key: 8, label: 'Attention - Cooldown Failed' },
      ]);


      return (
        <Box display="flex" flexDirection="row" alignItems="flex-start" className={classes.container}>
          {chipData.map((data) => {



            return (
            <div classes={classes.chipContainer}>
              <li key={data.key}>
                <Chip
                  label={data.label}
                  if (label === 'Heating') {
                    className={classes.heatingTag}
                  }

                />
              </li>
              </div>
            );
          })}
        </Box>
      );
}
export default PrinterStatusTags

你知道如何根据芯片分配课程吗？

更新答案 我想做两件事：

为每个芯片添加一个新的

类型

属性

创建从类型（第1点）到类的映射器

在你有了每个芯片到它的类型之间的映射之后。只要渲染它：

return (
        <Box display="flex" flexDirection="row" alignItems="flex-start" className={classes.container}>
          {chipData.map((data) => {
            return (
            <div classes={classes.chipContainer}>
              <li key={data.key}>
                <Chip
                  label={data.label}
                  className={classesMapper[data.type]} />
              </li>
              </div>
            );
          })}
        </Box>
      );

返回(
{chipData.map（（数据）=>{
返回(


);
})}
);

旧答案 您应该编写稍微不同的代码：

使用className属性而不是属性类（或类）

在className属性内设置条件。请注意，有更好的方法来设置正确的类，但对于您的情况，这就足够了

这是应该的代码：

   <div classeName={classes.chipContainer}>
      <li key={data.key}>
         <Chip label={data.label} className={ label ==== 'Heating' && classes.heatingTag}/>
      </li>
   </div>   

谢谢你的回答！但我的问题是，我有11个芯片，我有四个样式组，有没有更好的方法来编码每个类？

return (
        <Box display="flex" flexDirection="row" alignItems="flex-start" className={classes.container}>
          {chipData.map((data) => {
            return (
            <div classes={classes.chipContainer}>
              <li key={data.key}>
                <Chip
                  label={data.label}
                  className={classesMapper[data.type]} />
              </li>
              </div>
            );
          })}
        </Box>
      );

   <div classeName={classes.chipContainer}>
      <li key={data.key}>
         <Chip label={data.label} className={ label ==== 'Heating' && classes.heatingTag}/>
      </li>
   </div>