样式 v-html 视图 3

Style v-html Vue 3

出于某种原因,这在 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;
  }
}

我如何使用“香草”Vue 3 执行此操作?

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

我想从事的工作:

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

您可以使组件的样式在 scoped 属性范围内。
所有选择器都将自动添加前缀,以便样式仅适用于该组件。从你的示例代码中不清楚你是否有,所以让我们举个例子:

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

::v-deep还需要这样吗? v-deep 不会使其范围更广。
你能检查结果 CSS 编译成什么吗?

你能用你的代码创建一个完整的片段来测试吗?

看了 vue-loader

上的例子回想起来答案很明显

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

其实是这样的:

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

...除了 >>> 被替换为 ::v-deep 需要删除 space 因为它是伪 class,只是像常规 css

这会起作用:

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