Question

让我保存我有一个.Vue组件，我从某个地方抓起Github。我们称之为CompB，我们将在那里为蓝色标题添加一个CSS规则集：

CompB.Vue （我不会拥有的依赖，也许是从Github撤下的）

<template>
  ...
</template>

<script>
  ...
</script>

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

我计划将CompB嵌入到我自己的项目的CompA中。现在我有什么选择来覆盖范围规则？

Answer 1

在玩了一下之后，我觉得我有一个很好的方法。

全局覆盖

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

对于我想要覆盖全局和范围规则的情况。值得庆幸的是，VueJS允许将范围和未范围的样式块添加到.Vue文件中。所以我可以添加一个更具体的CSS规则集。还要注意我可以将一个类传递给CompB的道具，因为Vue为所有组件提供了内置的类和样式道具：
```
// 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的类具有更独特的名称，例如.compa-compb或一些哈希后缀，因此不会与使用其他组件发生冲突CompB和一个类.compb。但我认为对于大多数应用程序来说可能有点过头了。）
当然，CompB可以提供自己的附加道具来调整CSS或将类/样式传递到组件的区域。但是当你使用一个你不拥有的组件时（除非你把它分开），情况可能并非总是如此。另外，即使提供了这种情况，也总会存在这样的情况：＃34;我只想稍微调整一下填充！＆＃34;。上述两种解决方案似乎对此非常有用。

Answer 2

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

<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>

如何在Vue组件中覆盖范围样式？

2 个答案: