vue 无法覆盖vant的UI组件的样式


vue 无法覆盖vant的UI组件的样式

有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用。

解决方法:

使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件

<style scoped>
  .a >>> .b { /* ... */ }
</style>

以上的代码会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

注意:如果你使用了LessSass等预处理器,可能无法>>>正确解析。在这些情况下,您可以使用组合/deep/::v-deep组合 - 两者都是别名,>>>并且工作完全相同。

使用LessSass等预处理器的写法如下:

.van-radio {
  /deep/ .van-radio__label {
    width: 500px;
  }
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM