uni-app自带的radio在微信小程序上样式无效

### 解决uni-app中radio组件在微信小程序上样式不生效的方法 #### 使用全局样式调整 对于`radio`等原生组件，在微信小程序中的样式修改需特别注意。一种有效的方式是在项目的根目录下的`App.vue`文件内统一设置样式，因为这些组件属于平台特定的原生控件[^4]。 ```css /* App.vue 中 */ <style> page { /* 设置页面基础样式 */ } .radio-wrapper /deep/ .wx-radio-input.wx-checkbox-input { width: 20px; height: 20px; border-radius: 50%; background-color: white; box-shadow: inset 0 0 0 1px #ccc; } .radio-wrapper /deep/ .wx-radio-input-checked.wx-checkbox-input-checked { background-color: blue !important; box-shadow: none; position: relative; } .radio-wrapper /deep/ .wx-radio-input-checked.wx-checkbox-input-checked::after { content: ""; display: block; width: 8px; height: 8px; margin-top: 6px; margin-left: 6px; border-radius: 50%; background-color: white; } </style> ``` 上述代码通过使用`/deep/`穿透选择器来覆盖默认样式，并针对已选状态(`.wx-radio-input-checked`)设置了不同的视觉效果，从而实现了更美观的选择按钮外观。 #### 利用第三方库uView增强功能 如果遇到复杂的定制需求或希望简化开发流程，则可以考虑引入像[uView](https://www.uviewui.com/)这样的UI框架。这类工具提供了丰富的预设样式以及便捷的操作接口，能够帮助开发者快速构建界面并处理跨平台兼容性问题[^2]。 例如： ```html <!-- test1.vue 文件 --> <template> <view class="container"> <!-- uRadioGroup 组件来自 uView 库 --> <u-radio-group v-model="value" placement="row"> <u-radio :customStyle="{ marginLeft: '50rpx' }" label="选项一" name="option1"></u-radio> <u-radio :customStyle="{ marginLeft: '50rpx' }" label="选项二" name="option2"></u-radio> </u-radio-group> </view> </template> <script> export default { data() { return { value: '' } }, methods: {} } </script> <style scoped lang="scss"> .container { padding: 20rpx; .u-radio-group { flex-wrap: wrap; .u-radio { margin-bottom: 20rpx; &:nth-child(odd) { margin-right: 20rpx; } } } } </style> ``` 此示例展示了如何借助uView提供的API轻松地为单个`u-radio`实例应用额外的CSS属性，同时保持良好的布局控制力[^5]。