Vue樣式穿透

在開發中修改第三方組件樣式是很常見，但因爲 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>