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

Question

我想将颜色下方的线性渐变添加到 MUI Chip 作为背景颜色。有可能吗？

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

我正在使用 MUI v0.18.7。

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

Answer 1

只需将background 设置为您的样式中所需的渐变：

<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 属性（仅获取颜色）。这是引用from the Mozilla docs explaining this more thoroughly：

因为<gradient>s属于<image>数据类型，所以只能在<image>s可以使用的地方使用。因此，linear-gradient() 将不适用于 background-color 和其他使用 <color> 数据类型的属性。

Answer 2

您可以使用类覆盖 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>
  );
  }
  }

Answer 3

在MUI 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']}
/>

现场演示

相关答案

• Gradient border on MUI component