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