Modify the style in third-party components in vue

The project is modifying the style of third-party components, but due to  scoped the style isolation of attributes, you may need to remove  scoped or start another one  style . These practices will bring side effects (component style pollution, not elegant), style penetration is only effective when used in the CSS preprocessor.

We can use  >>> or  /deep/ solve this problem

<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>

 

Guess you like

Origin www.cnblogs.com/toughy/p/12690889.html