ElementUI的默认主题色是鲜艳、友好的蓝色，但是往往不能满足定制化的需求，我们在项目中，可能需要修改组件库默认的颜色，那么，该怎么操作呢？
首先，确定你的vue项目中有没有安装scss
image
项目中引入了scss时：
ElementUI的样式是使用scss编写的，所以主题色其实就是scss的一个变量，那么在你引入ElementUI样式之前，重新定义这个主题色变量就OK了
新建一个样式文件，例如 element-variables.scss，写入以下内容：
/* 改变主题色变量 */
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
import Vue from 'vue'
注意点：
1）要在引入elementUI默认样式之前定义你的主题色
2）在.scss文件中引入elementUI样式文件，如果是相对路径，前面要加‘~’
项目中没有引入scss
项目中如果没有使用scss，那么新建.scss文件就会报错，这种情况想改变主题色，可以使用官方的在线主题生成工具，或者官方推荐的命令行工具。
工具会生成一个css的样式文件压缩包，将这个样式文件解压到一个叫做‘my-theme’的文件夹下，在main.js中引入这个样式文件中的index.css
image
修改某一个组件的样式
主题色修改了，但是对于某些页面的某些组件，我们不想使用主题颜色，该怎么操作呢？
我们可以建立一个文件夹，里面专门用来放覆盖原有样式的scss文件或者css文件。
如果使用scss，可以引入到element-variables.scss文件中覆盖。比如：建立这样一个文件夹，tree.scss文件中专门用来覆盖elementUI中树的样式
image
在element-variables.scss文件中引入，一定要放在elementUI默认样式引入之后
@import "~element-ui/packages/theme-chalk/src/index";
如果不想将样式用到所有的“树”，记着这你的覆盖样式之前加上class名的限定。
tree-container {
这样，只有在外层class为“.tree-container”下的树才会被改变默认样式。
如果使用css，要单独引入到main.js文件中,elementUI样式之后。
@import "element-ui/packages/theme-chalk/src/index";
一定要注意：不要在加入“scope”标签的<style></style>里写覆盖文件。
网友评论