如何为材料-ui芯片背景添加线性渐变颜色?

时间:2018-02-18 07:15:58

标签: reactjs material-ui

我想在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>

2 个答案:

答案 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>
  );
  }
  }