❝
本文主要讲一讲Vue样式穿透的问题，我们经常使用各种样式预处理器，以及样式隔离，这就导致我们在改变第三方组件样式的时候经常不生效
❞
css样式
css是层叠样式表可以修饰我们的网页
css 后面的样式可以覆盖前面的样式
css 是有优先级权重的，权重不够无法覆盖，权重可累加！
/*
* 最高级权重 !important 无穷大
* 内联样式 权值为1000 如 style=""
* ID选择器 权值为100 如 #id
* 类，伪类和属性选择器 权值为10 如.box :hover :first-child等
* 标签选择器和伪元素选择器 权重为1 如 div :before等
*/
运用上面可以解决一部分的样式问题
scoped
我们经常写Vue文件的时候会在 style 标签上写上 scoped 属性，那么该样式就 只作用于当前文件，因为它在编译的时候会加上唯一hash前缀！
所以会经常导致我们的样式穿透不生效！
无预处理器
我们什么预处理器都不使用的话，只需要加上>>>即可
/* .box 是当前文件我们自己命名的class */
.box >>> .item{
color:red;
}
less预处理器
我们使用less预处理器，只需要加上/deep/即可
/* .box 是当前文件我们自己命名的class */
.box {
/deep/ .item{
color:red;
}
}
scss预处理器
我们使用scss预处理器，只需要加上::v-deep即可
/* .box 是当前文件我们自己命名的class */
/* ::v-deep 也可写成 :v-deep */
.box {
::v-deep .item{
color:red;
}
}
微信小程序
在微信小程序的组件中，我们会发现上面的都会失效，我们要加上以下内容
<!-- 该写法为uniapp vue2 模式下 -->
<script>
export default {
options: {
styleIsolation: 'shared'
}
}
</script>
最新vue3 + vite模式下
新版的vue3 + vite 已经不建议以上的写法了，会给警告
the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
我们看到第三方UI库已经大面积使用伪类函数了，样式穿透官方也建议使用:deep()代替
:deep(.box .item){
color:red;
}
如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。
原文始发于微信公众号（分享是个有趣的东西）：Vue及Vue3、小程序样式穿透问题解决方案
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/158718.html
