Vue中更改Element-ui標籤中默認樣式

背景：當我們引入一個組件時，難免會遇到需要更改組件原有樣式的情況，博主近來就遇到了，謹此記之

一，使用less深度選擇器

<style lang="less" >
@import 'tinymce/skins/ui/oxide/skin.min.css';
.tox-silver-sink{
  z-index:9999
}
</style>

安裝less插件：

npm install less less-loader --save

二， 使用深度作用選擇器，有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

<style lang="scss" scoped>
.a >>> .b { /* ... */ }
</style>

編譯後：
.a[data-v-f3f3eg9] .b { /* ... */ }


.message /deep/ .el-checkbox__label {
  color: #fff;
}
</style>

 

完