如何将线性渐变颜色添加到Material UI芯片背景？

Question

我想将线性渐变颜色添加到 Material UI 的 Chip 上，作为其背景颜色。这是否可能？

linear-gradient(to right bottom, #430089, #82ffa1)

我正在使用Material UI v0.18.7。

<Chip backgroundColor={indigo400} style={{width: 120}}>
     <Avatar size={32} color={white} backgroundColor={indigo900}>A</Avatar>
     This is a Chip
</Chip>

- Hemadri Dasari

Answer 1

只需在样式中将背景设置为所需的渐变即可：

<Chip style={{width: 120, background: 'linear-gradient(to right bottom, #430089, #82ffa1)'}}>
     <Avatar size={32} color={white} backgroundColor={indigo900}>A</Avatar>
     This is a Chip
</Chip>

请注意，linear-gradient 是一个返回图像而不是颜色的 CSS 函数。因此，您必须设置 background 属性（它接受图像），而不是 backgroundColor 属性（仅接受颜色）。以下是摘自 Mozilla 文档详细解释这一点的引用：：

由于 <gradient> 属于 <image> 数据类型，因此它们只能在可以使用 <image> 的地方使用。因此，linear-gradient() 不会在使用 <color> 数据类型的 background-color 和其他属性上工作。

- Jules Dupont

---

太好了，Jules！我应该自己尝试一下这个愚蠢的问题。谢谢 :) - Hemadri Dasari

很高兴能帮助你，Hemadri！总是很愉快的。 - Jules Dupont

Answer 2

您可以使用classes覆盖material-ui中的任何组件。 将backgroundColor替换为以下代码。

//After imports statements
const style={
  chip:{
    background: 'linear-gradient(to right bottom, #430089, #82ffa1)',
  }
}
class Chips extends ...{
  render(){
const classes=this.props.classes;
  return(
    <Chip className={classes.chip}>
      <!--Content-->
     </Chip>
  );
  }
  }

- noName94

---

感谢您的回答。 - Hemadri Dasari

Answer 3

在 Material UI v5 中，你可以使用 sx 或 styled()：

sx 属性

<Chip
  label="Chip Filled"
  sx={{
    color: 'white',
    background: 'linear-gradient(to right bottom, #36EAEF, #6B0AC9)',
  }}
/>

styled()

type GradientChipProps = {
  colors?: string[];
};
const GradientChip = styled(Chip)<GradientChipProps>(({ colors }) => ({
  color: 'white',
  ...(colors && {
    background: `linear-gradient(to right bottom, ${colors.join(',')})`,
  }),
}));

<GradientChip
  label="Chip Outlined"
  variant="outlined"
  colors={['red', 'pink', 'purple']}
/>

演示现场

相关答案

• 如何在Material UI组件上实现渐变边框效果

- NearHuscarl