style scoped 内修改外部组件样式不生效的解决方法

想修改项目中 ant Design 组件的样式，发现在< style scoped> 内直接修改并没有效果。

解决方法

当vue的< style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。如果需要修改子组件的样式可以用到深度作用选择器
如果希望 scoped 样式中的一个选择器能够作用得“更深”，影响到子组件，你可以使用 >>> 操作符：

// 在css 中使用
<style scoped>
.a >>> .b {  
     width:100px;
    text-align: center; 
    }
</style>

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

// 在sass 中使用
<style lang="scss" scoped>
.a {
  /deep/  .b {
    width:100px;
    text-align: center;
  }
}
</style>

参考官方文档：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#深度作用选择器

原因

scope设计的初衷就是让样式变得不可修改。当设置了scoped的style标签无法覆盖最外面antd的样式
scoped原理就是在css以及html上加一个唯一标识，然后根据权重来实现目的
如下

//
<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果为

//
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

其他方法

可以在一个组件中同时使用有 scoped 和非 scoped 样式：

// 混合样式
<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>