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;
}