Vue 范围样式不适用于已添加到插槽中的元素答案

【问题标题】：Vue scoped styling not working with elements that have been added inside a slotVue 范围样式不适用于已添加到插槽中的元素
【发布时间】：2021-06-18 22:14:55
【问题描述】：

将我的样式移动到语言环境设置，但看到当我将元素插入插槽容器时，它们将不起作用。我想这是正常的，如果有办法解决这个问题，请记住不，我不会将父（.child）样式放在父组件中，不，我想将我的 CSS 保存在单独的 scss 文件中。

组件（父级）

<template>
   <wrapper>
       <div class="child">Hello</div>
   </wrapper>
</template>

组件（调用的包装器）

<template>
   <div class="wrapper">
       <slot></slot>
   </div>
</template>

<style lang="scss" scoped>
@import "../../../sass/components/_container.scss";
</style>

container.scss

.wrapper{
    background-color:#333;

    .child{
         background-color:#fff;// not doing anything
    }
}

【问题讨论】：

你试过v-deep选择器了吗，我相信这就是它的目的。你可以像.wrapper::v-deep .child { background-color:#fff; } 一样使用它。见vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
据我所知（目前无法测试）这仅在 css 代码在组件内部而不是在 scss 文件中时才有效，但我可能是错的
我认为它是否在单独的 scss 文件中并不重要。但是，一旦您进行了测试，请告诉我们。
好的，即使在 scss 文件中也可以。我会说创建答案，我会给你积分！

标签： vue.js sass

【解决方案1】：

您可以使用v-deep 组合器来定位子元素/组件，例如：

.wrapper::v-deep .child { background-color:#fff; }

更多详情请参阅Deep Selectors documentation。

更新

似乎::v-deep .child 已被弃用。请改用::v-deep(.child) {} 或:deep(.child) {}。有关详细信息，请参阅RFC。

【讨论】：

::v-deep 已被弃用。我使用 .selector:deep{ .child{ //stuff} }
您有指向已弃用信息的链接吗？我还没见过 :deep 呢。
我找到了有关此更改的 RFC：github.com/vuejs/rfcs/blob/master/active-rfcs/…，如果有人感兴趣的话。
老实说，我再也找不到链接了，也可能是我尝试了一些东西并且成功了。