css - 如何向 Material UI Chip 背景添加线性渐变颜色？

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>

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 :

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.