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

Posted 2023-02-22

【中文标题】如何覆盖 Vue 组件中的作用域样式？

【英文标题】：How to override scoped styles in Vue components?

【发布时间】：2017-04-29 06:22:36

【问题描述】：

让我们保存一下，我有一个 .Vue 组件，我从 Github 某处获取。我们称它为 CompB，我们将在那里为蓝色标题添加一个 CSS 规则集：

CompB.Vue（我不拥有的依赖项，可能从 Github 中提取）

<template>
  ...
</template>

<script>
  ...
</script>

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

我计划将 CompB 嵌套到我自己项目的 CompA 中。现在我有哪些选项可以覆盖作用域规则？

【参考方案1】：

您需要为您的 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>

【讨论】：

哈哈，同时回答！不过看看我的回答，我总体上找到了一个好方法，+1

我认为 最好的 解决方案是，将 PR 发送到该库并删除 scoped，使用 BEM 或只是为类名添加前缀

是的，即使在这些范围内的情况下，我仍然发现自己在使用 BEM。但是最近我发现 scoped 可能没有我最初想的那么有用。有趣的是，我实际上最近在一个 github 包上做了一个问题，只要求这样做（BEM，没有“范围”）。

顺便说一句，这是 React 处理得更好的东西吗（例如，您可以将样式传递给 React 组件以覆盖默认组件吗？）？

在此处查看文档页面的底部：vue-loader.vuejs.org/en/features/scoped-css.html Notes 列表中的#4。

【参考方案2】：

玩了一会儿，我想我有一个很好的方法。

全局覆盖

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

父代覆盖

适用于我想同时覆盖全局规则和范围规则的情况。值得庆幸的是，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。但我认为这对于大多数应用程序来说可能是矫枉过正。）

当然，CompB 可以提供自己的附加属性来调整 CSS 或将类/样式传递到组件的区域。但是，当您使用不属于您的组件时（除非您分叉它），情况可能并非总是如此。另外，即使提供了这个，总会有这样的情况，你就像“我只是想稍微调整一下填充！”。上述两种解决方案似乎对此非常有效。