如何在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>

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属性（仅使用颜色）。这是来自Mozilla文档的引文，对此进行了更为详尽的解释：

由于<gradient>s属于<image>数据类型，因此只能在可以使用<image>s的地方使用它们。因此，linear- gradient()将无法background-color使用该<color>数据类型的其他属性。