样式穿透的方式有：
1. /deep/ 使用场景：
项目中用到了预处理器 scss 、sass、less 的时候，vue-cli3可能会导致编译报错
2. >>>操作符 使用场景：
项目使用的css样式并且没有使用预处理器 scss 、sass、less
3. ::v-deep 使用场景：
- 在有预处理器 scss 、sass、less的时候
- 在使用vue-cli3的时候也建议使用。
在子组件中使用上述三种方式都不起作用
解决方法： 需要在父组件中使用样式穿透的方式修改默认样式才会起作用
示例：（因为我的是vue-cli3项目，所以我使用的是 ::v-deep ）
<style lang="scss" scoped>
::v-deep .is-disabled {
background-color: transparent !important;
}
::v-deep .content-b-r .uni-easyinput {
text-align: right !important;
}
::v-deep .content .uni-easyinput__content-input {
padding-left: 0 !important;
}
</style>
网友评论