如何覆盖 Vue 组件中的作用域样式？

Question

让我们保存一下，我有一个 .Vue 组件，我从某处获取了 Github。我们称它为 CompB，我们将在其中添加一个 CSS rule-set 作为蓝色 header:

CompB.Vue（我不拥有的依赖项，可能来自 Github）

<template>
  ...
</template>

<script>
  ...
</script>

<style lang="scss" scoped>
  .compb-header {
    color: blue;
  }
</style>

我打算将 CompB 嵌套到我自己项目的 CompA 中。现在我有哪些覆盖范围规则的选项？

Answer 1

您需要为 css 添加更多特异性权重。您必须将该组件包装在另一个 class 中，以便您可以覆盖它。这是完整的代码

<template>
  <div class="wrapper">
    <comp-b>...</comp-b>
  </div>
</template>

<script>
import CompB from 'xxx/CompB'

export default {
  components: {
    CompB
  }
}
</script>

<style>
  .wrapper .compb-header {
    color: red;
  }
</style>

Answer 2

经过一番尝试，我想我找到了一个很好的方法。

全局覆盖

对于我想在所有情况下覆盖 CompB 规则的情况，我可以添加一个更具体的规则集，如下所示：#app .compb-header { .. }。由于我们始终只有一个根 (#app)，因此在规则集中使用 ID 是安全的。这很容易覆盖 CompB 中的范围规则。
家长覆盖

对于我想同时覆盖全局和作用域规则的情况。值得庆幸的是，VueJS 允许将作用域和非作用域样式块添加到 .Vue 文件中。所以我可以添加一个更具体的 CSS 规则集。另请注意，我可以将 class 传递到 CompB 的道具中，因为 Vue 为所有组件提供了内置的 class 和样式道具：
```
// in CompA (the parent)

<template>
  ...
  
  <compb class="compb"></compb>  
</template>

<script>
  ...
</script>

<style lang="scss">
  #app .compb .compb-header { 
    color: red; 
  }
</style>

<style lang="scss" scoped>
  ...
</style>
```
(注意：你可以更具体一些，让你传递给 CompB 的 class 有一个更独特的名字，比如 .compa-compb 或一些哈希后缀，所以没有与使用 CompB 和 class .compb 的其他组件发生冲突的可能性。但我认为对于大多数应用程序来说这可能是过大的杀伤力。）
当然，CompB 可能会提供自己的额外道具，用于调整 CSS 或将 classes/styles 传递到组件区域。但是，当您使用不属于您的组件时（除非您分叉它），情况可能并非总是如此。另外，即使提供了这个，也总会有像 "I just want to adjust that padding just a bit!" 这样的情况。上面的两个解决方案似乎很适合这个。

如何覆盖 Vue 组件中的作用域样式？

How to override scoped styles in Vue components?

css

webpack

vue.js

vuejs2