uniapp开发的微信小程序中 radio组件文字过多变形

116 阅读1分钟

使用scss开发 在style标签中使用:deep()穿透uniapp编译

完整代码:

radio :deep(.wx-radio-input){
    	width: 40rpx;
	  height: 40rpx;
	  min-width: 40rpx;
	  min-height: 40rpx;
}

使用:deep()前:

css代码编译情况:

//.wx-radio-input被当作项目中的类名参与编译,无法选中微信内置类名,未生效
radio .wx-radio-input.data-v-ad619a1e  {
  width: 40rpx;
  height: 40rpx;
  min-width: 40rpx;
  min-height: 40rpx;
}

文字超长,radio组件被压缩 image.png

使用后: css代码编译情况:

//.data-v-ad619a1e编译前置,代码可以正常生效
radio.data-v-ad619a1e .wx-radio-input {
  width: 40rpx;
  height: 40rpx;
  min-width: 40rpx;
  min-height: 40rpx;
}

image.png