v-html 渲染模板后有些样式没上去或者嵌套子组件样式没上去

一.这个与组件作用域 CSS相关

引用官方的话说就是：

“当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素”

还有一个小tip

通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。

二.解决方案

官方提供了一个解决方案：

1.深度选择器​

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

vue

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

上面的代码会被编译成：

css

.a[data-v-f3f3eg9] .b {
  /* ... */

2. >>> 和 /deep/

1.当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式

语法：外层容器 >>> 组件 { }

<style lang="css" scoped>
    .el-button >>> span{
        color: '#f00'
    }
</style>

3.当项目中使用的 css 扩展语言是 less， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

  &__hongbao::v-deep{
color: var(--hongbao-color);
}


 /deep/ &__hongbao{
color: var(--hongbao-color);
}

三.总结：

1. stylus的样式穿透 使用>>>（不推荐）
2.  vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep

 

3. 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用

• ::v-deep (scss)

• /deep/ (less)