风格 v-html Vue 3

Question

出于某种原因，这在 Vue 3 中有效，这在其他所有 SO 答案中均已弃用：

.description >>> p {
  color: red;
  margin-bottom: 1rem;
}

但是我已经尝试了 ::v-deep 的所有排列，但似乎无法使其工作：

::v-deep .description {
  p {
    color: red;
    margin-bottom: 1rem;
  }
}

.description {
  ::v-deep p {
    margin-bottom: 1rem;
  }
}

我如何使用“vanilla”Vue 3 做到这一点？

<div class="description text-sm">
  <div v-html="item.description"></div>
</div>

我想从事的工作：

<style scoped>
.description p {
  margin-bottom: 1rem;
}
</style>

Answer 1

查看 vue-loader

上的示例后回想起来，答案是显而易见的

问题是我认为嵌套是必需的，或者它必须位于目标选择器之前。

实际上，它与此相同：

.description >>> p {
    margin: 1rem 0;
}

...除了

>>>

被替换为

::v-deep

，需要删除空格，因为它是伪类，就像常规 css

这会起作用：

.description::v-deep p {
    margin: 1rem 0;
}

Answer 2

您可以使用

scoped

属性来设置组件的样式范围。
所有选择器都会自动添加前缀，以便样式仅适用于该组件。从您的示例代码中不清楚是否有，所以让我们举个例子：

<style lang="scss" scoped>
.description {
  p {
    color: red;
    margin-bottom: 1rem;
  }
}
</style>

还需要这样

::v-deep

吗？ v-deep 并没有使其范围更广。
你能检查一下生成的 CSS 编译后的结果吗？

您可以使用您的代码创建一个完整的代码片段以在此处进行测试吗？

Answer 3

使用

:deep {}

根据您的情况，您应该这样做：

<template>
   <div class="description" v-html="item.description"></div>
</template>

<style scoped>
.description {
   :deep {
      p {
         margin-bottom: 1rem;
      }
   }
}
</style>