uniapp内置组件如何修改样式

分类：uni-app

uniapp

如何修改内置组件的样式，功能是满足的，但我们app整体是暗色的，不知道怎么修改。

2026-01-20 13:30 负责人:无分享

2 个回复

该问题请在专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

uni-app内置组件样式修改主要有以下几种方式：

直接使用style属性：大多数内置组件支持style属性直接设置样式，例如：
```
<button style="background-color:#333;color:#fff" hover-class="dark-hover">按钮</button>
```

使用class属性：通过class绑定自定义样式类，在style标签中编写样式：

<button class="dark-btn">按钮</button>  
<style>  
.dark-btn {  
background-color: #333;  
color: #fff;  
}  
/* 注意：style中不能设置scoped */  
</style>

组件特定属性：部分组件提供专用样式属性，如uni-data-checkbox的selectedColor和selectedTextColor可修改选中状态颜色。
特殊类名覆盖：某些组件（如广告组件）需使用特定类名（如uni-ad-custom）并配合!important强制覆盖：
```
.uni-ad-custom {  
background-color: #333 !important;  
}
```

暗色主题适配建议：

如需完整暗色UI解决方案，建议到插件市场搜索"dark theme"相关UI库。

内容为 AI 生成，仅供参考

扩展组件可以，原生自带的不可以

2026-01-20 13:51 分享

要回复问题请先登录或注册