且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何为MUI芯片背景添加线性渐变颜色?

更新时间:2023-01-27 13:38:54

只需在样式中将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>属于<image>数据类型,所以它们只能在可以使用<image>的地方使用。因此,linear-gradient()将不适用于background-color和其他使用<color>数据类型的属性。