样式 v-html Vue 3答案

【问题标题】：Style v-html Vue 3样式 v-html Vue 3
【发布时间】：2021-10-03 19:21:15
【问题描述】：

由于某种原因，这在 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>

【问题讨论】：

为什么简单的.description p 不起作用？
因为我想要一个范围样式
哦，我试过了，只是在作用域 css 块中的 .description p 不起作用。我不知道为什么......
好的，但是没有作用域语法它可以工作吗？浏览器当然不能拒绝为元素着色。p 标签肯定存在于输出中？您能否添加一个示例 item.description 只是为了完整？或者完全把它变成一个 sn-p？
啊，关键是我不想要全局样式，我想要这个组件的范围样式。是的，这会起作用，但它也会用我不想做的全局样式弄脏我的工作表

【解决方案1】：

看了vue-loader上的例子，回想起来答案就很明显了

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

实际上，它与此相同：

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

...除了>>>被::v-deep替换，需要删除空格，因为它是一个伪类，就像普通的css一样

这将起作用：

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

【讨论】：

【解决方案2】：

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

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

::v-deep 还需要这种方式吗？ v-deep 不会使其范围更广。
你能检查生成的 CSS 编译成什么吗？

你能用你的代码创建一个完整的 sn-p 来在这里测试吗？

【讨论】：