element UI修改组件的默认样式-转载

element UI修改组件的默认样式，方法有三种：

1. 新建global.css,并在main.js中引入import “./assets/style/global.css”;
2. 在单个xx.vue文件最后多写一对标签，即有两对style标签，一对有scoped,一对没有scoped。如果写在有scoped属性的style标签里：覆盖的样式不会生效！
3. 通过deep属性去控制,可以不用新建style标签,最方便

通过这三种方法，在文件中编写css去覆盖原来的样式。

可以通过添加 ！important 修饰符提高层级，例如：

/*举例1. 分页背景色全局修改*/

.el-pagination li.active {
    background: #29a88d !important;
}
/deep/.el-pager li.active {
    color: #fff;
}

通过deep属性控制修改ElementUI原样式： 

/* 举例2. 表格样式全局修改 */

.el-table th {
    background: #eaeaea;
    color: #333;
    padding-left: 8px;
    border-right: 0px;
}
/deep/.el-table td {
    padding: 8px 0;
}

/* 举例3. 上传样式全局修改 */

.el-upload-list–picture-card .el-upload-list__item {
    height: 90px;
    width: 90px;
}
/deep/.el-upload–picture-card {
    height: 90px;
    width: 90px;
    line-height: 100px;
}

PS：如果多个文件用到了同一个element组件，但是要求组件样式不一样，解决办法：在选择器的前面添加一个ID选择器来限制作用范围

#home .el-pagination li.active {
    background: #29a88d !important;
}
#home .el-pager li.active {
    color: #fff;
}

/*order.vue:*/

#order .el-pagination li.active {
    background: #eee !important;
}
#order .el-pager li.active {
    color: #f00;
}

转载：感谢原作者