修改vue子组件样式不生效？请使用/deep/选择器

为何修改vue子组件样式不生效

设置了scoped属性后，父组件的样式没法渗透到子组件里面。

<div data-v-abc>
    <Tab></Tab>
</div>

scoped的原理

我理解为给样式添加一个做用域，一个标识。

转义前的代码：
<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>
转译后：
<style>
.example[data-v-5558831a] {
  color: red;
}
</style>

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

怎么解决样式不生效的问题

使用深度选择器来写使样式生效。
有两种写法：

1. .a >>> .b {}
2. .a /deep/ .b

当你子组件使用了 scoped 但在父组件又想修改子组件的样式能够 经过 >>> 来实现：

<style scoped>
.a >>> .b { /* ... */ }
</style>

将会编译成
.a[data-v-f3f3eg9] .b {
  /* ... */
}

什么是/deep/深度选择器

传送门