vue样式穿透（deep样式穿透）_修改组件库样式

vue样式穿透（deep样式穿透）_修改组件库样式

使用vue的过程中经常会遇到样式失效的问题，使用UI框架的过程中，也会遇到这样的问题。一般来说这样的问题就是使用scoped而导致的。

scoped是什么，原理是什么

开发的过程中会有多个组件，为了避免样式冲突。我们常常会在style中添加scoped来避免这个问题。它的原理就是通过给标签添加data-v-xxx的自定义属性，来实现私有化。

• 未使用scoped
  
• 使用scoped标签之后

什么时候使用穿透

当你使用scoped想要修改组件库样式的时候
当父组件想要修改子组件样式的时候，父组件通过给子组件添加类名修改样式的时候，只有子组件的根标签才会被修改，非跟标签如子标签等就会样式失效。

// 子组件 <son>
<template>
 <div class="root">
        根元素
        <div class="bbb">非根元素</div>
    </div>
</template>
// 父组件
<template>
 <sonclass="son"></son>
</template>

当在父组件中通过son类名修改子组件字体颜色时，只有根元素会生效。非根元素就不会生效

样式穿透

使用了样式穿透的类名，在解析的时候就不会出现自定义属性。这样样式就会共用。
样式穿透在原生css中使用>>>

.root >>>.bbb{
color:#fff;
}

在less中使用/deep/

.root{
/deep/.bbb{
  color: #fff;
}
}

在scss中使用::deep

.root ::v-deep .bbb {
	color: red;
}