uni-ui修改样式（持续更新）

原创

已于 2025-10-21 15:50:07 修改 · 928 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #uni-ui

于 2025-04-11 17:41:46 首次发布

场景

通过样式穿透修改uni-ui组件样式
这里以vue2写法为主，vue3可以使用更多的选择，比如:deep()，当然也有可能存在组件版本差异，导致方法名不同

实现

1.uni-data-select
在这里插入图片描述

<uni-data-select v-model="deviceValue" :localdata="deviceOptions" @change="changeDevice" placeholder="选择机巢"></uni-data-select>
<uni-data-select v-model="typeValue" :localdata="typeList" @change="changeType" placeholder="全部类型"></uni-data-select>
<uni-data-select v-model="timeValue" :localdata="timeList" @change="changeTime" placeholder="更新时间"></uni-data-select>

::v-deep .uni-data-select {
   
   
	width: 33.3%;
	height: 100%;
}
::v-deep .uni-select{
   
   
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: 0.73rpx solid rgba(235,235,235,0.5);
}
::v-deep .uni-select__input-box {
   
   
	height: 100%;
	.uni-select__input-placeholder {
   
   
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 8.79rpx;
		color: #333333;
	}
	.uni-select__input-text{
   
   
		font-size: 8.79rpx;
	}
	.uni-icons{
   
   
		font-size: 11.72rpx !important;
	}
}

2.uni-datetime-picker
在这里插入图片描述

在这里插入图片描述

<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />

::v-deep .uni-datetime-picker{
   
   
	width: 33.3%;
	height: 100%;
}
::v-deep .uni-date{
   
   
	height: 100%;
	.uni-date-editor--x{
   
   
		border-radi