通过 colorPrimary 或 colorSecondary 更改 Material-ui 芯片颜色

Question

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

这是我的代码示例：

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

以及浏览器中元素的图片： https: //i.imgur.com/bWYGzzz.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_}}

Answer 2

您可以使用以下命令轻松设置组件的颜色primary或颜色：secondaryChipcreateTheme

const theme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: 'red',
        },
        colorSecondary: {
          backgroundColor: 'brown',
        },
      },
    },
  },
});

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

或者，如果您使用的是MUI v5，您可以借助以下sx属性快速更改其颜色：

<Chip label="sx" sx={{ bgcolor: 'green', color: 'white' }} />

如果您希望能够通过道具指定不同的颜色，您可以使用styled：

const options = {
  shouldForwardProp: (prop) => prop !== 'bgcolor',
};
const StyledChip = styled(
  Chip,
  options,
)(({ bgcolor }) => ({
  color: 'white',
  backgroundColor: bgcolor,
}));

<StyledChip label="styled" bgcolor="purple" />