CSS样式穿透

看到一些小伙伴说，不知道该如何解决组件样式无法更改问题，今天俩说一说几种可能

1. 首先你要知道你写的组件标签不可以作为标签样式去修改（可以写内联，这里指不能拿标签名写在style里）
2. 其次是，你可以在浏览器的代码检查中，选中那个组件，找到你需要用到的class（可能里面会涉及嵌套，要注意）然后复制粘贴到你的style修改当中，进行修改
3. 当你修改后发现没有改变，你需要考虑的问题是样式继承，权重，还有就是是否需要样式穿透（这是重点）

下面说一下如何判断

• 确定上面前两条没有问题
• 查看有没有代码写错漏写或者使用标签样式
• 是否复制粘贴正确的class类名和需要的类名
• 样式继承：类似a标签功能的组件标签，你需要看一下文档，是否有相关限制和说明
• 权重：给他！important，看他是否生效
• 如果其他都试过了，感觉还是没有实际效果，那么你可以考虑采用样式穿透了

为什么需要样式穿透

原生组件,它有自己的CSS样式,我们一般的外部修改一般不起作用，由于scoped会限制我们改变当前以外的样式，所以会使用样式穿透

使用方法

1.这是我在百度里面找到的一个图片因为太过模糊，我就直接手写，不推荐使用这种，好像有bug，我没使用过这个，我用第二种第三种多一些

.wrapper >>> .swiper-pagination-bullet-active {
   		background: #fff
}

2.style=sass/style=less的样式穿透如下

/deep/ 你需要改变的class { }
::v-deep 你需要改变的class { }
如果权重不够,或者你需要使用的那个没有class,那就需要在前面加上父级class,你只需要知道将deep或者v-deep加到你想要修改的样式前就可以
eg:sss /deep/ button{ } 这就是修改button但是button没有class

下面上代码（名字随便起了奥，大家建议见名知意）

.sss ::v-deep button {
  width: 25px;
}
::v-deep .sss::after {
  height: 21px;
  width: 21px;
}

sass编译支持叠加写法,如果你需要使用的在同级,那你可以在最上面加个::v-deep,下面扔代码

.sss ::v-deep {
  div {
    height: 25px;
  }
  .aaa::after {
    height: 21px;
    width: 21px;
  }
}

如果还遇到新的问题，可以讨论