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

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

玩了一下后,我觉得我有一个很好的方法.

1. 全局覆盖

   对于我想在CompB的所有情况下覆盖规则的情况,我可以添加一个更具体的规则集,如下所示:#app .compb-header { .. }.因为我们总是只有一个root(#app),所以在规则集中使用ID是安全的.这很容易覆盖CompB中的范围规则.

2. 家长覆盖

   对于我想要覆盖全局和范围规则的情况.值得庆幸的是,VueJS允许将范围和未范围的样式块添加到.Vue文件中.所以我可以添加一个更具体的CSS规则集.另请注意,我可以将类传递给CompB的道具,因为Vue为所有组件提供了内置的类和样式道具:

   // in CompA (the parent)
   
   <template>
     ...
     <!-- Vue provides built-in class and style props for all comps -->
     <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.但我认为这可能是对于大多数应用来说过度杀伤.)

3. 当然,CompB可以提供自己的附加道具来调整CSS或将类/样式传递到组件的区域.但是当你使用你不拥有的组件时(除非你把它分开),情况可能并非总是如此.另外,即使提供了这种功能,总会出现这样的情况:"我只是想稍微调整一下这个填充!".上述两种解决方案似乎对此非常有用.

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>