css - 如何使用 ::v-deep() 在 vue 中？

Question

我正在尝试将现有样式类应用于将使用加载的子元素v-html，因为/deep/并且已被弃用，我在 vue 中>>>尝试过。::v-deep

<template>
<div v-else v-html="childHtml" class="parent-class"></div>
</template>

<style scoped>
.parent-class ::v-deep .child-class {
  border: unset;
  border-radius: 2px;
  margin: 0 auto;
  margin-bottom: 2%;
  background-color: #fff;
  box-sizing: border-box;
  zoom: 70%;
}
</style>

但是 vue 编译器说， *::v-deep 用作组合器已被弃用。使用 ::v-deep() 代替。（使用 Vue 3.0.0-beta.1）

如何使用 ::v-deep() 并摆脱这个编译错误？

请帮助，在此先感谢

Answer 1

>>> .class-i-want-deep{ /// }如果你不使用 sass/scss，你可以尝试使用。此处来自 vue-loader 的文档 就错误消息而言，它说：

“*::v-deep 作为组合器的用法已被弃用。改用 ::v-deep()。（使用 Vue 3.0.0-beta.1）”

所以看起来你的语法::v-deep在 Vue 3 中不再允许。尝试使用新的 ::v-deep()，我找不到专门的文档。更新：看起来 ::v-deep() 使用 3.0 正在为 OP 工作。还没有复制它。