样式 v-html Vue 3

Posted 2023-02-23

【中文标题】样式 v-html Vue 3

【英文标题】：Style 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 来在这里测试吗？

【讨论】：

我用我的作用域 css 添加了一条评论。有没有办法在没有scss的情况下实现它？我把我试过的东西放在上面

我明白了。您是否尝试过 lang="scss" 只是为了测试？这可能会根据您的配置更改样式的处理。您应该创建一个可执行代码 sn -p 来查找错误。