记局部覆盖element-ui的默认样式

今天正好在封装element-ui的表格组件，对比了下layui的样式，发现element的padding过大和line-height过小。

作用的样式对应如下：

.el-table td, .el-table th{padding:12px 0}

.el-table .cell{line-height: 23px}

 

按照以往的做法，是在vue里新建一个style，不设置scoped。并在table上指定一个新的class，例如mytable

<el-table class="myclass" ......>

然后使用样式覆盖

<style scoped lang="scss">
.mytable td, .mytable th{padding:12px 0 !important;}
</style>

想想这种方法还是有局限的，1是必须要自建新的class，2是important由于强制了顺序，需要慎用。

因此尝试了另外一种更优雅的方法。即使用scoped的方式。先看看直接使用scoped有什么问题吧：

scoped的原理是给对应的节点生成data-v-xxxx的属性，然后选择器里使用例如el-table[data-v-xxxx]来实现局部样式覆盖。直接写需要的样式如下

.el-table td, .el-table th{
  padding: 9px 0;
}

.el-table td, .el-table th{
  padding: 9px 0;
}

.el-table .cell{
  line-height: 21px;
}

结果没生效，一看生成的CSS，原来是这样的

@charset "UTF-8";

.el-table td[data-v-b8be5364], .el-table th[data-v-b8be5364] {
  padding: 9px 0;
}
.el-table td[data-v-b8be5364], .el-table th[data-v-b8be5364] {
  padding: 9px 0;
}
.el-table .cell[data-v-b8be5364] {
  line-height: 21px;
}

难怪没生效，data-v-xxx属性是生成在el-table上的啊！于是尝试了下 >>>的写法，也就是scss的/deep/。写作：

.el-table /deep/ td, .el-table /deep/ th{ /* css是>>> scss是deep */
  padding: 9px 0;
}

.el-table /deep/ td, .el-table /deep/ th{
  padding: 9px 0;
}

.el-table /deep/ .cell{
  line-height: 21px;
}

再看一下界面，都生效了。生成的CSS如下：

@charset "UTF-8";
/* ---------- 常量值 ---------- */
.el-table[data-v-b8be5364] td, .el-table[data-v-b8be5364] th {
  /* css是>>> scss是deep */
  padding: 9px 0;
}
.el-table[data-v-b8be5364] td, .el-table[data-v-b8be5364] th {
  padding: 9px 0;
}
.el-table[data-v-b8be5364] .cell {
  line-height: 21px;
}

好了，这下不用定义新样式，也不用important就将局部样式调整了

继续调整其他样式。。。。