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

有时候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;
  }
}

2.对于scss，less这类的预处理器

使用 /deep/ 操作符取而代之——这是一个 >>> 的别名

代码如下：
image

这样修改样式就有效

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容