项目使用element-ui+vue
项目中有一个需求,需要更改元素消息提示组件中警告类型的背景颜色和小感叹号的背景颜色
有两种方法,第一种比较简单,用F12找到你要改变的元素,直接覆盖对应的样式。 但考虑到有时候这种样式需要应用到多个组件上,比如我需要同时改变这些组件的颜色如右图所示,
其中一些组件可能会涉及悬停或选中时特殊状态的颜色,因此第一种方法变得过于冗长elementui样式更改elementui样式更改,但不容易覆盖所有场景。
这时可以使用第二种方法,新建一个样式文件,比如styleVariables.scss,覆盖ElementUI的样式,按照官方文档导入即可。
当改变主题颜色或者统一默认样式时,可以通过改变这个文件中的变量来改变,如:
$--color-primary: #409EFF;
$--color-warning: #E6A23C;
$--color-info: #909399;
变量名称可以在node_modules>element-ui>packages>theme-chalk>src>common>var.scss中找到。 这样,变量改变的颜色就可以覆盖element组件的所有场景了!