vu开发小技巧之样式穿透

笑魇轻轻

于 2020-07-09 21:39:09 发布

阅读量233

点赞数 1

分类专栏： vue

版权

36 篇文章

订阅专栏

通常我们在开发当中经常会遇到修改第三方组件样式的时候，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style这些都比较麻烦而且可能带来组件样式被污染的副作用。
所以样式穿透相比就显得简单优雅了，但是样式穿透在css预处理器中使用才生效。

使用 >>> 或 /deep/ 解决这一问题:

<style scoped>
外层 >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>