本文介绍了如何在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:
这篇关于如何在material-ui芯片背景中添加线性渐变颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!