elementui样式更改-element-ui通过变量改变默认样式

2023-08-29 0 6,650 百度已收录

项目使用element-ui+vue

项目中有一个需求,需要更改元素消息提示组件中警告类型的背景颜色和小感叹号的背景颜色

elementui样式更改-element-ui通过变量改变默认样式

有两种方法,第一种比较简单,用F12找到你要改变的元素,直接覆盖对应的样式。 但考虑到有时候这种样式需要应用到多个组件上,比如我需要同时改变这些组件的颜色如右图所示,

elementui样式更改-element-ui通过变量改变默认样式

elementui样式更改-element-ui通过变量改变默认样式

其中一些组件可能会涉及悬停或选中时特殊状态的颜色,因此第一种方法变得过于冗长elementui样式更改elementui样式更改,但不容易覆盖所有场景。

这时可以使用第二种方法,新建一个样式文件,比如styleVariables.scss,覆盖ElementUI的样式,按照官方文档导入即可。

elementui样式更改-element-ui通过变量改变默认样式

当改变主题颜色或者统一默认样式时,可以通过改变这个文件中的变量来改变,如:

$--color-primary: #409EFF;
$--color-warning: #E6A23C;
$--color-info: #909399;

变量名称可以在node_modules>element-ui>packages>theme-chalk>src>common>var.scss中找到。 这样,变量改变的颜色就可以覆盖element组件的所有场景了!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 elementui elementui样式更改-element-ui通过变量改变默认样式 https://www.wkzy.net/game/169864.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务