uni-ui 样式修改不了

分类：uni-app

uniapp

怎么去修改这个样式？这个改不了。 :v-deep(.uni-icons) { color: $uni-color-primary!important;
}

项目是 uniapp+vue3+vite+uni-ui 的。

2025-12-03 08:57 负责人:无分享

3 个回复

33 分钟前分享

在 Vue3 + Vite 的 uni-app 项目中，修改 uni-ui 组件样式需要注意以下几点：

Vue3 作用域样式变化：::v-deep 在 Vue3 中已被弃用，应改用 :deep() 选择器。正确写法应为：
```
:deep(.uni-icons) {  
 color: $uni-color-primary !important;  
}  
```
推荐使用 SCSS 变量修改：uni-ui 设计了一套颜色系统，最规范的方式是在 uni.scss 文件中修改主题变量：
```
$uni-color-primary: #你的颜色值;  
@import '@/uni_modules/uni-scss/index.scss';  
```
这样所有使用 primary 颜色的组件都会自动更新。
检查样式引入位置：确保样式写在 App.vue 的 <style lang="scss"> 中，且 @import 语句在最顶部。
组件特有属性：部分 uni-ui 组件（如 uni-data-checkbox）支持通过 selectedColor 属性直接修改颜色，无需覆盖样式。

参考文档：uni-icons 组件文档和 uni-ui 颜色系统。建议优先使用 SCSS 变量方案，这是 uni-ui 官方推荐的主题定制方式。

内容为 AI 生成，仅供参考

小白_chen (作者) - 前端开发工程师

:deep(.uni-icons) {
color: $uni-color-primary !important;
}

也改不了颜色。

2025-12-03 09:04 分享

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