在项目开发过程中，为了提高开发效率，我们团队广泛使用了element-ui的组件库，但同时带来一个问题就是组件的样式并非我们想要的，通过加id这种方法的能提高元素的部分层级，但是对于一些组件内部通过一些条件新创建的元素，我们控制样式就比较无能为力了，于是我们考虑修改源码。官网上也给我们提供了这样的条件，
首先，安装「主题生成工具」，可以全局安装或者安装在当前项目下，这里以全局安装做演示：
npm install element-theme -g
其次，从github或者npm上拉取默认主题：
# 从 npm npm i element-theme-default -D# 从 GitHub npm i https://github.com/ElementUI/theme-default -D
因为是全局安装的，所以可以在命令行里通过et调用工具，执行-i初始化变量文件。
et -i
直接编辑对应的CSS文件，然后保存，保存文件后，再到命令行执行：
et
（整体修改：可以通过修改 element-variables.css文件里的变量，即可改变整体风格。
修改部分源码进入:node_modules/element-theme-default/src目录下修改相应文件的代码即可。）
还有一点值得注意：修改源码的时候不会触发编译的watch模式，需要手动再保存一遍 element-variables.css这个文件才可以触发编译效果。
下一步就是将我们修改的引入就可以了，（默认情况下编译的主题目录是放在./theme下，你可以通过-o参数指定打包目录。像引入默认主题一样，在代码里直接引用theme/index.css文件即可。）
import '../theme/index.css'
这里说明一下element-ui的样式写法：
element-theme-default采用的是下一代CSS风格的开发方式，有几个显著特征：采用var进行全局样式变量定义 支持@import引入外部css 支持层级嵌套书写，支持一些独特的语法一些独特的语法列举如下：
- @component-namespace后面跟着的通常是 el，会通知整个组件的class前缀渲染为 el
以下的部分是跟在 @component-namespace层级之后,也就是都在 @component-namespace el {...}花括号内。 - @b后面跟着的class会渲染为： el-class。例如：
@b alert{...}会被渲染为
el-alert{...} - @modifier或者 @m后面跟着的class会被渲染为： --class。例如：
@b alert{ @modifier info{...}
@m warning{...}}
会被渲染为
el-alert--info{...}
el-alert--warning{...} - @e后面跟着的class会被渲染为： __class。例如：
@b alert{ @e content{...}}
会被渲染为
el-alert__content{...} - @when后面跟着的class会被渲染为： .is-class。例如：
@b alert{ @e title{ @when bold {...} }}
会被渲染为
el-alert__title.is-bold{...} - @mixin button-size后面跟着四个值，分别代表是padding上下、padding左右，font-size，border-radius。
例如：
@b button{ @mixin button-size 10px 20px 30px 40px;}
会被渲染为
.el-button{ padding: 10px 20px; font-size: 30px; border-radius: 40px;} - @mixin button-variant后面跟着3个值，分别代表color、background-color、border-color。同时还会渲染一系列的hover/active/focus等颜色的深浅变化。
例如：
@b button { @mixin button-variant white blue black;}
会被渲染为：
.el-button{ color: white; background-color: blue; border-color: black;}
.el-button:hover,.el-button:focus{...}/* 一系列颜色变化 */...... - tint()和 shade()函数，分别用来使颜色提升亮度、颜色降低亮度用的。接受两个参数，第一个是颜色值，第二个是明暗百分比。
例如：
.foo { color: tint(#BADA55, 42%);}
.bar { background-color: shade(#663399, 42%);}
会被渲染为：
.foo { color: #e2efb7;}.bar { background-color: #2a1540;}
