您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

只需将设置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>数据类型的其他属性

其他 2022/1/1 18:14:34 有600人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶