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张

赞 (4)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)