uni-app组件样式修改不生效的原因及解决方法

今天在一个项目中用到的 uni-app 的 checkbox 组件，该组件有一个 color 属性，声称可以修改多选按钮的颜色。我尝试修改成红色，结果边框还是蓝色：

<checkbox class="agree-btn" color="red"/>

uni-app组件样式修改不生效的原因及解决方法 经验总结 第1张

直接用 CSS 修改其样式是不生效的，搞了半天，找到原因和注意事项：

1、因为 uni-app 的默认组件是定义好了的，如果要修改需要去引入的 components 里去找到对应的插件，对应的类名，然后在插件里修改，也可以自行修改样式并覆盖原有样式。

2、选择自行修改的时候，一定在 app.vue 页面去引入更改的 css 或者直接在此页面进行修改，否则修改无效。

3、不要在 style 中增加 scoped 属性。

4、注意小程序中跟 h5 页面是略有不同的，如下官方语句：

• checkbox 的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用 color 属性。
• 如需调节 checkbox 大小，可通过 css 的 scale 方法调节，如缩小到70%style="transform:scale(0.7)"

修改方法：

1、直接将 .wxss 在 app.vue 中引入：

@import './styles/w3h5.com_checkbox.wxss';

或者：

2、在 app.vue 的 <style> 中添加 CSS 代码，下面是我的修改代码：

.agree-btn .uni-checkbox-input{
  width: 24upx;
  height: 24upx;
  border: 1px solid #FF3B30;
}
.agree-btn .uni-checkbox-input.uni-checkbox-input-checked,.agree-btn:not([disabled]) .uni-checkbox-input:hover{
  border: 1px solid #FF3B30;
}

这样就可以修改成功了。

uni-app组件样式修改不生效的原因及解决方法 经验总结 第2张