::v-deep深度作用选择器实现Vue组件样式穿透

2023-12-20 18:21:41

在Vue项目中经常会用到一些第三方的组件库，可以提高开发效率，不用重复造轮子，但是有时候这些组件的样式并不满足我们项目的要求，且该组件并提供相应的API来修改这些样式，这时候就可以使用::v-deep深度作用选择器来深度修改CSS

这里以uni-app中uView组件库中<u-cell/>为例，原来右边显示的文本为灰色，我们想改成红色

只需添加如下CSS代码即可

<style lang='scss' scoped>
.u-cell {
	::v-deep {
	    .u-cell__value{
			color: #333333;
			font-size: 26rpx;
	    }
	}
}
</style>

注意CSS的头要改成这样

<style lang='scss' scoped>

文章来源:https://blog.csdn.net/mqdxiaoxiao/article/details/135109995
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。