重复

• 我搜索了现有的问题

最新版本

• 我测试了最新版本

总结 💡

Chip 组件接受一个 color 属性，但它只能引用主题中的颜色：

<Chip label="primary" color="primary" />

可以通过 Package ThemeProvider 提供自定义颜色，例如：

export const ColorChip: React.FunctionComponent<ColorChipProps> = (props) => {
  return (
    <ThemeProvider
      theme={(theme: Theme) =>
        createTheme({
          ...theme,
          palette: {
            ...theme.palette,
            primary: {
              main: props.color.color,
            },
          },
        })
      }
    >
      <Chip
        color="primary"
        label={props.color.name}
        onClick={() => props.onSelectedChange(!props.isSelected)}
        variant={props.isSelected ? 'filled' : 'outlined'}
        sx={{
          border: props.isSelected ? `1px solid ${props.color.color}` : undefined,
        }}
      />
    </ThemeProvider>
  )
}

这没问题，直到同时更改多个这些芯片时-重新插入 ThemeProvider 组件非常慢(38个芯片需要5秒以上，同时UI冻结)。
另一种方法是覆盖背景颜色，例如：

export const ColorChip: React.FunctionComponent<ColorChipProps> = (props) => {
  const styleOverride = props.isSelected ? {backgroundColor: props.color.color} : {}
  return (
    <Chip
      color="primary"
      label={props.color.name}
      onClick={() => props.onSelectedChange(!props.isSelected)}
      variant={props.isSelected ? 'filled' : 'outlined'}
      sx={{
        border: props.isSelected ? `1px solid ${props.color.color}` : undefined,
      }}
      style={styleOverride}
    />
  )
}

这个选项的问题在于它需要一些关于组件实现的知识-例如，不覆盖主要颜色意味着MUI无法确定是否应该使用深色或浅色文本颜色，悬停效果会失效...
允许直接使用自定义颜色可能不会是组件本身的复杂更改，但可以解决这两个问题。

示例 🌈

可以使用以下方式：

<Chip
  color="#123abc"
  label='label'
/>

动机 🔦

如上所述，这是为了让组件更具灵活性。