Vue3 样式穿透

使用场景

在使用常用的一些组件库时，比如Element-UI、Ant-Desigin，因为自身的实际使用需求不同导致需要对其样式进行修改。

scoped

Vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。

scoped三条渲染规则

1. 给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性
2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

PostCSS

PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了’样式模块化’的效果。

Vue2中样式穿透的方法

• 原生CSS 使用>>>

  .类名 >>> .类名{样式}
  

• 使用预处理器 使用/deep/ 或者::v-deep

  /deep/ .类名{样式}
  父类 /deep/ 子类
  
  ::v-deep .类名{样式}
  父类 ::v-deep 子类
  

Vue3中样式穿透的方法

• 使用:deep()

  :deep(样式选择器)
  

• 使用::v-deep()

  ::v-deep(样式选择器)