Vue 2 和 NuxtJS - 来自父级的样式子组件

Posted 2023-02-22

【中文标题】Vue 2 和 NuxtJS - 来自父级的样式子组件

【英文标题】：Vue 2 and NuxtJS - style child component from parent

【发布时间】：2021-10-09 16:08:07

【问题描述】：

我有一个带有这两个组件的 Nuxt.js 项目（所以仍然使用 Vue 2），我想覆盖父级的子样式，我发现了 ::v-deep 伪选择器，但它似乎不是工作。

我的标签始终显示为cornflowerblue，而不是orange。

有人经历过吗？

PS：在我让它工作之后，我想从组合 API 的设置函数中导入一些样式，例如 (primaryColor: '#fff') 并将它们传递给我的样式标签（以允许样式自定义来自 JSON 文件）。我见过一些可以使用的方法（例如this one 或this one）。有更好的方法吗？

父母

<template>
  <div>
    <Label class="ui-label" />
  </div>
</template>

<script lang="ts">
import  defineComponent  from '@nuxtjs/composition-api'

export default defineComponent(
  name: 'ParentComponent',
)
</script>


<style lang="scss" scoped>
.ui-label 
  ::v-deep 
    .label 
      color: orange;
    
 

</style>

孩子

<template>
  <div class="label">Abc</div>
</template>

<script lang="ts">
import  defineComponent  from '@nuxtjs/composition-api'

export default defineComponent(
  name: 'Label',
)
</script>

<style lang="scss" scoped>
.label 
  color: cornflowerblue;

</style>

【参考方案1】：

您实际尝试使用的语法与 Vue3 有关 >> ::v-deep (.label)

从今天开始，在 Nuxt 中，您需要写 ::v-deep .label

非常有用的链接：https://***.com/a/55368933/8816585

【讨论】：

对不起，我的答案不是最新的，我用这个 Vue 2 语法更新了它，但似乎还有什么问题。我以前也看过这个帖子，也点赞了！

@ThéoLavaux 我仍然坚持我最初的提议。不工作吗？

@ThéoLavaux 您可以尝试使用浏览器开发工具检查 DOM 以查看是否应用了某个类吗？另外，您是否需要在多个元素上使用::v-deep？否则，无需嵌套 IMO。

不，最初的提议没有奏效。但是，如果我打开 Devtools，我会看到两个类都在生效，但是，blue 颜色优先于orange。因为.label[data-v-7ad15415] color: blue 比[data-v-57f67934] .label color: orange 更有特异性？

@ThéoLavaux 在链接的答案中还有我的How I do personally handle this kind of flow 方法。最后，您可以随意组织它，但是，传递道具是 IMO 最干净、最灵活的解决方案。您也许也可以研究这种方法，但不确定它的价值。 markus.oberlehner.net/blog/…