有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用。
解决方法:
使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件
<style scoped>
.a >>> .b { /* ... */ }
</style>
// 将被编译成 .a[data-v-f3f3eg9] .b { /* ... */ }
注意:如果你使用了Less
或Sass
等预处理器,可能无法>>>
正确解析。在这些情况下,您可以使用/deep/
或::v-deep
,与>>>
工作完全相同。
使用Less或Sass等预处理器的写法如下:
.van-radio {
/deep/ .van-radio__label {
width: 500px;
}
}
使用stylus的写法如下:
.van-radio {
>>> .van-radio__label {
width: 500px;
}
}