vue-awesome-swiper 组件内设置样式失效问题

@感谢羊羊羊0703

vue-awesome-swiper 组件内设置样式失效问题

---

给外框定义id

    
     I'm slide 1
     I'm slide 2
     I'm slide 3
     I'm slide 4
    
    

  

---

方法一：全局覆盖

• **单独新建css文件，在index.html引入 **
• 在组件内书写 不要加scoped

---

方法二：局部样式限定

用该组件最外层class包裹内部轮播样式，不加scoped

---

方法三：样式穿透（推荐）

/deep/ 是sass和less的样式穿透

#pa /deep/ .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
  }
  #pa /deep/ .swiper-pagination-bullet-active {
    color:#fff;
    background: #ff51d6;
  }

>>>是stylus的样式穿透

#pa >>> .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
  }
  #pa >>> .swiper-pagination-bullet-active {
    color:#fff;
    background: #ff51d6;
  }

全部代码

---

其他框架改变样式解决方法——配置全局样式

—— 对于有样式变量的框架 参考 vux 怎么用 样式变量 修改主题配色

---

自我理解，小白一枚，不对请指正