Vue 作用域样式不适用于已添加到插槽内的元素

Question

将我的样式移动到区域设置，但看到当我将元素插入槽容器时它们将不起作用。我想这是正常的，如果有办法解决这个问题，请记住，不，我不会将父（.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>

容器.scss

.wrapper{
    background-color:#333;

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

Answer 1

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

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

有关更多详细信息，请参阅深度选择器文档。

更新

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