vue加scoped后就无法修改vant的UI组件的样式

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

解决方法：

使用深度选择器，将

scoped

样式中的选择器“深入”，即影响子组件

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

以上的代码会编译成：

注意：如果你使用了

Less

或

Sass

等预处理器，可能无法

>>>

正确解析。在这些情况下，您可以使用组合

/deep/

或

::v-deep

组合 - 两者都是别名，

>>>

并且工作完全相同。

使用

Less

或

Sass

等预处理器的写法如下：

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