1.什么情况下使用样式穿透
在使用vue组件开发的过程中,有些第三方的组件库(例如Element UI)的组件是需要进行调整样式以还原UI图的。需要局部修改第三方组件库样式而又不去除scoped属性,就会造成组件之间的样式覆盖,此时就需要穿透scoped,也就是需要使用样式穿透。
2.什么是样式穿透
样式穿透,官方叫做深度选择器,就是在父级组件里强制修改子组件的内部样式
3.怎样使用样式穿透
1.使用css样式时,可以用>>>进行样式穿透
<style lang="css" scoped>
.parent >>> .son{
/**/
}
</style>
2.使用less,scss时,可以用/deep/进行样式穿透
有些预处理器(例如less,scss)无法正确解析>>>,可以使用 /deep/ 或 ::v-deep 操作符代替
style使用css的预处理器(less, sass, scss)的写法如下
<style lang="scss" scoped>
.parent{
/deep/ .son {
/**/
}
}
</style>
或者使用::v-deep
<style lang="scss" scoped>
.parent{
::v-deep .son {
/**/
}
}
</style>
我的实例:当使用uni-app脚手架进行项目的创建时,使用组件scroll-view,需要更换滚动视图区域的背景颜色。
新建页面scroll (part是自己创造的组件)
<template>
<view>
<view class="uni-padding-wrap uni-common-mt box">
<view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view id="demo1" class="scroll-view-item_H uni-bg-red"><part/></view>
<view id="demo2" class="scroll-view-item_H uni-bg-green"><part/></view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue"><part/></view>
</scroll-view>
</view>
<view class="uni-common-pb"></view>
</view>
</view>
</template>
在需要插入的index页面引入组件
<template>
<view class="content">
<Scroll class="scroll"/>
</view>
</template>
<script>
import Scroll from '../index/Scroll-swiper.vue';
export default {
components: {
Scroll,
}
}
</script>
在scroll页面中,使用选择器无法改变背景颜色。
此时选择去引入组件index页面,选中插入组件,因为是scss预处理器,所以用2里面的方式,这里使用的/deep/
<style lang="scss" scoped>
.content{
.scroll{
margin-top: 1rem;
/deep/ .uni-scroll-view{
background-color: #efefef;
}
}
}
</style>
此时水平滚动就添加好了背景颜色