vue项目中使用组件库设置样式不生效的解决方法

scoped

实现原理

实现组件的私有化，不对全局造成样式污染 ,我们使用scoped

作用：声明的样式只对当前组件生效

<style lang="less" scoped>
.hambuger-btn {
  position: fixed;
  right: 0;
  width: 66px;
  height: 82px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  opacity: 0.902;
}
.placeholder {
  width: 66px;
  height: 82px;
  flex-shrink: 0;
}    
</style>

• 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性
• 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局
• 如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件（ 注意 ）

deep（深度选择器）

解决scoped作用域的第一种方法

是原生js中的方法vue一样可以使用

<style scoped>
    .tabs {
  height: 80px;
  padding-top: 170px;
  /deep/ .van-tabs__wrap {
    height: 80px;
    position: fixed;
    top: 92px;
    z-index: 2;
    width: 100%;
  }
  /deep/ .van-tab {
    border-right: 1px solid #eee;
    width: 220px;
  }
  /deep/ .van-tabs__line {
    bottom: 10px;
    background-color: #5babfb;
    width: 30px;
  }
  /deep/ .van-tab--active {
    color: black;
  }
}
</style>

::v-deep

解决scoped作用域的第二种方法

只能在vue中使用

<style scoped>
    .tabs {
  height: 80px;
  padding-top: 170px;
  ::v-deep .van-tabs__wrap {
    height: 80px;
    position: fixed;
    top: 92px;
    z-index: 2;
    width: 100%;
  }
}
</style>