让我们保存一下我有一个.Vue我从 Github 上的某个地方获取的组件。我们将其称为 CompB，并为蓝色标头添加一个 CSS 规则集：
CompB.Vue（我不拥有的依赖项，可能是从 Github 中提取的）
<template>
...
</template>
<script>
...
</script>
<style lang="scss" scoped>
.compb-header {
color: blue;
}
</style>
我计划将 CompB 嵌套到我自己的项目 CompANY 中。现在我可以选择什么来覆盖作用域规则？
经过一番尝试后，我认为我找到了一个很好的方法。
-
全局覆盖
如果我想在所有情况下覆盖 CompB 的规则，我可以添加一个更具体的规则集，如下所示：#app .compb-header { .. }。因为我们总是只有一个根（#app）在规则集中使用 ID 是安全的。这很容易覆盖 CompB 中的范围规则。
-
父级覆盖
对于我想要覆盖全局规则和范围规则的情况。值得庆幸的是，VueJS 允许将作用域和无作用域样式块添加到 .Vue 文件中。因此我可以添加更具体的 CSS 规则集。另请注意，我可以将类传递到 CompB 的 props 中，因为 Vue 为所有组件提供内置类和样式 props：
// 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 或将类/样式传递到组件的区域。但当您使用不属于您的组件时，情况可能并不总是如此（除非您分叉它）。另外，即使提供了此功能，在某些情况下您仍然会想“我只是想稍微调整一下填充！”。上述两种解决方案似乎对此非常有效。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
