关于uniapp + vue3 封装uni弹窗组件里内再使用其他uni组件样式失效

本文链接：https://blog.csdn.net/weixin_53812239/article/details/136388444

关于uniapp + vue3 封装uni弹窗组件里内再使用其他uni组件样式失效

问题: uniapp + vue3 封装uni弹窗组件里内再使用其他uni组件在弹窗组件内修改样式失效

封装一个弹窗自定义组件usePopup 并在弹窗组件内使用uni步进器以及修改该样式

<template>
  <!-- 用法用量组件 -->
  <uni-popup ref="popup" type="bottom" :safe-area="false" @touchmove.stop="">
      <view class="uniNumber"> 
          <uni-number-box v-model="Quantity":min="1" />
      </view>
  </unipopup>
</template>

在父页面使用该组件修改样式

<template>
<usePopup class='usePopup'/>
</template>

//修改样式弹窗组件内的步进器样式
<style scoped>
.usePopup .uniNumber:deep(.uni-numbox__value) {
	border: 0px !important;
	background: transparent !important;
	width: 60rpx;
	height: 60rpx;
}

.usePopup .uniNumber:deep(.uni-numbox__minus) {
	background: #ffffff !important;
	width: 60rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	color: #000 !important;
	border: 1px solid #dad5d5 !important;
}

.usePopup .uniNumber:deep(.uni-numbox__plus) {
	background: #ffffff !important;
	width: 60rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	color: #000 !important;
	border: 1px solid #dad5d5 !important;
}
</style>