在 MUI reactjs 中为自动完成芯片着色的方法是什么

Question

我一直在尝试根据某些 if 条件为 MUI 中的 Autocomplete 着色，就像我在下面描述的那样。找不到方法。

Answer 1

你可以试试这个

在css

中添加MuiChip-labelclass

.MuiChip-label
{
   color:#fff !important;
}

Answer 2

自动完成组件有 renderTags 属性，它采用选定值数组和 return 个筹码。因此，您可以根据您的情况自定义芯片颜色（通过 color 属性使用预定义的主题颜色或使用 sx 属性设置背景颜色）：

      <Autocomplete
        multiple
        renderTags={(value: readonly string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip
              key={index}
              variant="outlined"
              label={option}
              sx={{background: value === "A" ? 'red' : 'green'}}
            />
          ))
        }
       ...other props
      />

在 MUI reactjs 中为自动完成芯片着色的方法是什么

What is the way to color the Autocomplete chips in MUI reactjs

javascript

css

reactjs

material-ui