reactjs - 更改 Material UI Chip 主要或次要颜色

Question

我正在尝试以编程方式更改 Material UI Chip 的颜色，但运气不佳。根据Chip API您必须通过 color 属性使用枚举中的三个值之一来设置颜色；默认、主要和次要。然后，您应该能够覆盖 colorPrimary 或 colorSecondary css 类，并且背景颜色应该发生变化。

这是我的代码示例:

<Chip key={label.id} color='primary' classes={{ colorPrimary: label.color }} label={label.label} />

以及浏览器中元素的图片: /image/P0IPA.png还不能内联:(

如果您查看所选元素，您将看到我尝试应用的正确颜色，#ff0000，因此它正在获取颜色并将其放在某处。

我尝试了这种变体，添加了 colorBackground 属性，但收到一条错误消息，指出 colorPrimary 类需要字符串而不是对象

<Chip key={label.id} color='primary' classes={{ colorPrimary: { backgroundColor: label.color } }} label={label.label} />

再次重申我的目标:我想将十六进制代码颜色应用于芯片以更改背景颜色。

Answer 1

您可以通过多种方式实现它。

可以直接添加样式

<Chip key={label.id} color='primary' style={{backgroundColor:'green'}} label={label.label} />

或者您可以覆盖该类:

const StyleChip = withStyles({
  root: {
    backgroundColor:'salmon'
  }
})(Chip);

要在任何地方使用，只需将 Chip 替换为 StyleChip

<StyleChip key={label.id} color='primary' label={label.label} />

但是如果你想通过编程来设置颜色，第一种方法是完美的，因为

style={{backgroundColor:_thisCanBeVariable_}}