vue scoped 穿透_vue 修改内部组件样式问题

最新推荐文章于 2024-05-14 16:18:12 发布

大雨倾城

最新推荐文章于 2024-05-14 16:18:12 发布

阅读量552

点赞数

分类专栏： vue css

本文链接：https://blog.csdn.net/qq_38918953/article/details/101446705

版权

vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

方法一，有scope和less情况下，用/deep/修改第三方库的样式，#qrcode为组件自定义名称， img为第三方库元素。

<style scoped lang="less">
#qrcode{
            text-align: center;
            padding-bottom: 38px;
            /deep/ img{
              margin: 0 auto;
            }
          }
</style>

方法二，在scope情况下，用>>>修改第三方库的样式，box-out为组件自定义名称，name为第三方库元素名。

<style scoped>
  /*
  修改样式
  通过使用 box-out 的class类，找到下面组件内的class类，中间必须得使用 >>> 才能找到下面的class类。
  */
  .box-out >>> .name {
    color: red;
  }
</style>

方法三，全局样式

<style>
/* global styles */
</style>

方法四，通过js修改样式

  addIndicatorClass () {
      if (document.querySelector('.mint-indicator') != null) {
        // 整个页面返回上一级时，再消除样式
        document.querySelector('.mint-indicator').className = 'editInfoIndicator';
      }
    }