element UI修改组件的默认样式

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

1.新建global.css,并在main.js中引入import "./assets/style/global.css";

2.在单个xx.vue文件最后多写一对<style>......</style>标签，即有两对style标签，一对有scoped,一对没有scoped。如果写在有scoped属性的style标签里：覆盖的样式不会生效！

3.通过deep属性去控制,可以不用新建style标签,最方便

 

通过这三种方法，在文件中编写css去覆盖原来的样式，可以通过添加  ！important   修饰符提高层级，例如：

  /*分页背景色全局修改*/

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

    /* 上传样式全局修改 */

.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;
}

 

/* 表格样式全局修改 */

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

 

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

home.vue:

#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;
}