大白话 Vue3组件之间样式不冲突

局部样式scoped属性

vue局部样式，我们可以通过在style标签上添加scoped,也可以封装@mixin文件进行引入

<style lang="scss" scoped>
   
</style>

scoped的实现原理：

vue通过postcss给每个dom元素添加一个data-开头的随机自定义属性实现的

然后css的样式最终也会带上这些属性，根据这些属性找到元素

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

<div class="box">
   <van-button type="warning">警告按钮</van-button>
</div>

假设我们背景颜色改变不成功

<style lang="scss" scoped>
.box {
  background: palegreen;
}
.btn {
  background: red;
}
</style>

可以尝试增加样式的权重!important

<style lang="scss" scoped>
.box {
  background: palegreen;
}
.btn {
  background: red !important;
}
</style>

需要样式穿透，也可以用：深度选择器/deep/

<style lang="scss" scoped>
.box { 
    /deep/ .btn { 
        padding: 10px; 
     }
}
</style>

也可以通过在样式中使用： 外层dom >>> 第三方组件

外层 >>> 第三方组件
.box >>> .swiper{
    background:#fff;
}

在我这个Vue3项目中，我使用的是：*:deep()

*:deep(.top) {
   // 改变vant组件背景颜色
  .van-nav-bar {
    background: #1ba9ba;
  }
}

其他几个可能会有点问题，推荐大家使用 *:deep()