我想在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>
答案 0 :(得分:8)
只需将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>
数据类型的属性。
答案 1 :(得分:2)
您可以使用类覆盖material-ui中的任何组件。 而不是backgroundColor尝试此代码。
//After imports statements
const style={
chip:{
background: 'linear-gradient(to right bottom, #430089, #82ffa1)',
}
}
class Chips extends ...{
render(){
const classes=this.props.classes;
return(
<Chip className={classes.chip}>
<!--Content-->
</Chip>
);
}
}