css - 如何覆盖 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 { .. }。由于我们始终只有一个根 (#app)，因此在规则集中使用 ID 是安全的。这很容易覆盖 CompB 中的范围规则。

2. 父级覆盖

   对于我想同时覆盖全局和作用域规则的情况。值得庆幸的是，VueJS 允许将作用域和非作用域样式 block 添加到 .Vue 文件中。所以我可以添加一个更具体的 CSS 规则集。另请注意，我可以将一个类传递给 CompB 的 Prop ，因为 Vue 为所有组件提供了内置的类和样式 Prop :

   // 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 可能会提供自己的额外 Prop ，用于调整 CSS 或将类/样式传递到组件区域。但是，当您使用不属于您的组件时(除非您 fork 它)，情况可能并非总是如此。另外，即使提供了这个，在某些情况下，您仍然会觉得“我只想稍微调整一下填充!”。上述两种解决方案似乎对此很有效。