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

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

引用官方的话说就是：

“当 

上面的代码会被编译成：

css

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

2. >>> 和 /deep/

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

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

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)