Vue及Vue3、小程序样式穿透问题解决方案

❝

本文主要讲一讲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连(关注、赞、在看)，谢谢! 后面会更新更多。

关注公众号了解更多