樣式穿透的方式有:
1. /deep/ 使用場景:
項(xiàng)目中用到了預(yù)處理器 scss 毛肋、sass、less 的時(shí)候趁桃,vue-cli3可能會(huì)導(dǎo)致編譯報(bào)錯(cuò)
2. >>>操作符 使用場景:
項(xiàng)目使用的css樣式并且沒有使用預(yù)處理器 scss 油啤、sass益咬、less
3. ::v-deep 使用場景:
- 在有預(yù)處理器 scss 、sass裆甩、less的時(shí)候
- 在使用vue-cli3的時(shí)候也建議使用冻河。
在子組件中使用上述三種方式都不起作用
解決方法: 需要在父組件中使用樣式穿透的方式修改默認(rèn)樣式才會(huì)起作用
示例:(因?yàn)槲业氖莢ue-cli3項(xiàng)目叨叙,所以我使用的是 ::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>