问题引出

        在使用vue编写前端代码的时候经常会用到ElementUI、Vant等第三方组件,但是有一些组件里面的样式是封装好的,我们需要在局部组件中修改他们的组件库样式,又不能去除scoped属性(造成组件之间的样式覆盖)。+

方法1:适用于sass和less的样式穿透  使用 /deep/

外层类  /deep/ 第三方组件类{

        修改的第三方组件的类

}

//例:
  .order_vload {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.2vw 4.7vw 1.7vw;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 1vw;
    transform: scale(1.17);
    }
   .order_vload /deep/ .van-loading__text {
      margin: 1.7vw 0 0;
      font-size: 3.2vw;
    }
  

方法2:stylus的样式穿透 使用 >>>

.order_vload {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.2vw 4.7vw 1.7vw;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 1vw;
  transform: scale(1.17);
}
.order_vload >>> .van-loading__text {
  margin: 1.7vw 0 0;
  font-size: 3.2vw;
}

Logo

前往低代码交流专区

更多推荐