Vue样式穿透

最新推荐文章于 2025-05-26 11:39:51 发布

PinkM∞n7

最新推荐文章于 2025-05-26 11:39:51 发布

阅读量805

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： vue.js elementui sass 前端 css

本文链接：https://blog.youkuaiyun.com/w1060436872/article/details/124967272

HTML+CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue组件开发中如何使用样式穿透来调整第三方组件库的样式，包括使用>>>、/deep/及::v-deep等操作符的方法，并通过实际案例展示了在uni-app项目中对scroll-view组件应用背景色的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

此时水平滚动就添加好了背景颜色

注意：
        ① 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/
        ② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
        ③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用