Vue的样式穿透问题

最新推荐文章于 2024-08-08 15:10:37 发布

Sunny

最新推荐文章于 2024-08-08 15:10:37 发布

阅读量286

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/L_C_sunny/article/details/129125315

版权

Vue中使用scoped属性可防止样式全局污染，但会限制影响第三方库的样式。为修改第三方库样式，可以利用>>>或/deep/，具体用法取决于所使用的CSS预处理器（如CSS、less、node-sass或dart-sass）。

摘要由CSDN通过智能技术生成

我们在vue组件写样式一般是在<style>标签里面，但是我们在这里的样式默认是全局样式，如果其它组件的class名取重复了则会导致样式污染。

所以vue支持在<style>标签添加scoped属性，这样当前组件的样式只会在当前样式生效，其它组件不会影响到，这样子避免样式全局污染。

如果你的引入了第三方库，如果你想修改第三方库的样式，直接通过dom查找，修改样式是没有效果的。





解决方案：

如果你使用的是css，没有使用css预处理器，则可以使用>>>，/deep/，::v-deep。

如果你使用的是less或者node-sass，那么可以使用/deep/，::v-deep都可以生效。

如果你使用的是dart-sass，那么就不能使用/deep/，而是使用::v-deep才会生效。