时间戳

首页 > 解决方案 > Vue js - 制作一种由子组件继承的样式

css - Vue js - 制作一种由子组件继承的样式

问题描述

首先，当我想为当前组件设置一个私有样式时，我在标签内定义它。为了让子组件的样式可见，我使用了一个深度选择器让它通过，如下所示：

<style scoped>
   .a >>> .b {
       ...
   }
</style>

上面的代码被翻译成

.a[data-v-f3f3eg9] .b

换句话说：对于这个特定 a 的每个孩子，如果它是 b，则对其应用以下样式。

我的问题是关于以下陈述：

<style scoped>
   >>> .b {
      ...
   }
</style>

首先，Visual Code 会抛出一个关于这个表达式的错误：

[css] 规则或选择器预期

期望我在深度选择器之前放置一个范围选择器。我想弄清楚的是，如果这个表达式按照文档中的说明进行了预处理，应该是

.b

那么是什么让这种风格不是全局的，并且与下面的定义不同（没有范围）：

<style>
   .b {
       ...
   }
</style>

事实上，它们是不同的。我已经尝试过了，后者实际上是全局的，而前者对父组件和它的子组件可见。

有人对此有解释吗？并且，如果语法

<style scoped>
   >>> .b {
      ...
   }
</style>

不是很常见，在不为父元素定义选择器的情况下，制作仅用于子组件的样式的正确方法是什么？

标签： cssvue.jsvuejs2

解决方案

::v-deep是不会扰乱 VSCode linter 的等价物：

<style scoped>
    ::v-deep .b {
        ...
    }
</style>

推荐阅读