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

场景

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

实现

1.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: #FFFFFF;
	}
}

2.uni-table

<view class="uni-container">
	<uni-table ref="table" :loading="loading" type="" emptyText="暂无更多数据" @selection-change="selectionChange">
		<uni-tr>
			<uni-th width="50" align="center">任务名称</uni-th>
			<uni-th width="40" align="center">任务状态</uni-th>
			<uni-th width="40" align="center">任务类型</uni-th>
			<uni-th width="40" align="center">执行机场</uni-th>
			<uni-th width="40" align="center">航线名称</uni-th>
			<uni-th width="40" align="center">创始人</uni-th>
			<uni-th width="70" align="center">创建时间</uni-th>
			<uni-th width="70" align="center">备注</uni-th>
			<uni-th width="50" align="center">操作</uni-th>
		</uni-tr>
		<uni-tr v-for="(item, index) in tableData" :key="index">
			<uni-td align="center">{{ item.taskname }}</uni-td>
			<uni-td align="center">{{ item.static }}</uni-td>
			<uni-td align="center">{{ item.type }}</uni-td>
			<uni-td align="center">{{ item.airport }}</uni-td>
			<uni-td align="center">{{ item.airname }}</uni-td>
			<uni-td align="center">{{ item.founder }}</uni-td>
			<uni-td align="center">{{ item.createtime }}</uni-td>
			<uni-td align="center">{{ item.notes }}</uni-td>
			<uni-td>
				<view class="uni-group">
					<button class="uni-button" size="mini" type="warn">执行</button>
					<button class="uni-button" size="mini" type="primary">轨迹</button>
				</view>
			</uni-td>
		</uni-tr>
	</uni-table>
	<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
</view>

.uni-table{
	border-radius: 0 !important;
	background: transparent !important;
	.uni-table-tr{
		height: 36.62rpx;
	}
	.uni-table-th{
		background-color: #242B38;
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 8.79rpx;
		color: #FFFFFF;
		border: none;
		line-height: 100%;
	}
	.uni-table-td{
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 8.79rpx;
		color: #FFFFFF;
		border-bottom: 0.73rpx solid rgba(235,235,235,0.5);
		line-height: 100%;
	}
	.checkbox{
		padding: 0;
		width: 10.25rpx;
	}
}

.uni-group {
	display: flex;
	align-items: center;
	justify-content: center;
	.uni-button{
		height: 17.58rpx;
		width: 26.37rpx;
		background: none;
		border: 0;
		padding: 0;
		margin: 0;
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 10.25rpx;
	}
	.uni-button:after{
		border: 0;
	}
	.uni-button[type=warn]{
		color: #FF4437 !important;
	}
	.uni-button[type=primary]{
		color: #1E77F5 !important;
	}
}

//分页器
.uni-pagination-box{
	height: 36.62rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.uni-pagination__total{
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 10.25rpx;
		color: #FFFFFF;
		line-height: 15.38rpx;
	}
	.uni-pagination__btn{
		height: 21.97rpx;
		width: 21.97rpx;
		background: transparent;
		border: 0.73rpx solid rgba(235,235,235,0.5);
		.uni-icons{
			font-size: 10.25rpx !important;
			color: #fff !important;
		}
	}
	.uni-pagination__num{
		height: 21.97rpx;
		min-width: 21.97rpx;
		width: 21.97rpx;
		.uni-pagination__num-tag{
			line-height: 21.97rpx;
			height: 21.97rpx;
			min-width: 21.97rpx;
		}
	}
}