样式 v-html 视图 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;
  }
}

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

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

我想从事的工作：

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

Answer 1

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

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

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

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

Answer 2

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

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

其实是这样的：

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

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

这会起作用：

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

Style v-html Vue 3