最近在做一个需求,遇到这样一个问题,接口返回的一段html字符串,在list.vue这个组件中使用v-html渲染到页面的时候,发现在list.vue中设置的对于v-html内容的样式没有生效,这是什么情况?
经过查询发现:
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被Vue 的模板编译器处理。
这句话非常清楚地表明了没有生效的原因。
那我们怎么设置让它生效呢?
直接使用:deep()
对于针对v-html的样式的,我们用:deep()处理一下;
代码如下:
:deep(.all-tables) {
table {
background-color: #fff;
td {
font-size: 12px;
color: #666;
}
}
}