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