scoped 无法修改UI组件的样式

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

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

<style scoped>
  .a >>> .b { /* ... */ }
</style>
// 将被编译成 .a[data-v-f3f3eg9] .b { /* ... */ }

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

使用Less或Sass等预处理器的写法如下:

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

使用stylus的写法如下:

.van-radio {
  >>> .van-radio__label {
    width: 500px;
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容