Style 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;
}
}

我该怎么做呢?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中检查它编译成什么吗?

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