如何在material-ui芯片背景中添加线性渐变颜色?

问题描述：

我想将下面的线性渐变添加到Material-UI Chip作为背景色.有可能吗?

I want to add linear-gradient below color to Material-UI Chip as a background color. Is it possible?

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

我正在使用Material-UI v0.18.7.

I am using 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>

答

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

Just set the background to the desired gradient in your styles:

<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文档的报价 :

Note that linear-gradient is a CSS function that returns an image, not a color. So, you have to set the background property (which takes an image) rather than the backgroundColor property (which takes just a color). Here's a quote from the Mozilla docs explaining this more thoroughly:

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

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.

如何在material-ui芯片背景中添加线性渐变颜色?

相关推荐