【UniApp】-uni-app-修改组件主题和样式
前言
- 好，经过上个章节的介绍完毕之后，了解了一下 uni-app-扩展组件
- 那么了解完了uni-app-扩展组件之后，这篇文章来给大家介绍一下 uni-app-修改组件主题和样式
- 首先不管三七二十一，先来新建一个项目
搭建演示环境
创建一个全新的项目，因为本文要修改组件主题和样式，所以这次创建项目选择 uni-ui 模板：
然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 manifest.json 文件，然后选择微信小程序配置，复制一下即可。
- 经过如上的这么一顿操作之后，就可以搭建完毕运行环境，与编码环境
- 接下来就可以开始进行介绍 uni-app-修改组件主题和样式内容了
步入正题
修改组件主题
- 首先我们来看一下，uni-app-修改组件主题的官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-sass.html
我们先使用一下组件，然后在看完了样式之后我们在进行修改，这里我们使用数字角标组件，先来看一下效果：
<template>
<view>
<uni-badge text="2" type="primary"></uni-badge>
<uni-badge text="4" type="error"></uni-badge>
<uni-badge text="22" type="primary"></uni-badge>
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
运行一下，效果如下：
我通过发现这个数字角标组件的样式是根据 type 属性来决定的，那么我们就可以通过修改 type 属性来修改组件的主题，比如说我们把 type 属性的值改为 success，那么组件的主题就会变成绿色。
那么知道了这些内容之后，我们就好办了，假如说我们要更改一下 type=primary 的颜色，那么我们就需要修改 primary 所对应的颜色。
我在前面的文章当中是不是有介绍到一个文件叫做 uni.scss，这个文件就是用来修改组件主题的，使用或修改对应的 scss 变量，就可以修改组件的主题。
上图中，是我查阅官方文档发现，提供了一些变量默认值，这些值就是当前组件的主题，我们可以通过修改这些值来修改组件的主题。
我们要更改的是 primary 的颜色，那么我们就可以在 uni.scss 文件中，找到 primary 这个变量，然后修改它的值即可。
注意：通过 uni-ui 创建的项目, uni.scss 文件是没有内容的，需要自己手动添加
假如说我将 primary 的颜色修改为 red，那么组件的主题就会变成红色。
$uni-primary: red;
修改组件主题的方式就是这样，首先你要确定你要修改组件对应的 scss 变量，在通过修改 uni.scss 文件中的变量值，就可以修改组件的主题。
最主要是就是查阅官方文档，大家都需要有这种查阅官方文档的习惯，这样才能更好的学习。
修改组件样式
就继续以上面的数字角标组件为例，我们来修改一下组件的样式，比如说我们想要修改一下组件的圆角，那么我们就可以通过修改组件的 border-radius 属性来修改组件的圆角, 还想修改一下文字的颜色，那么我们就可以通过修改组件的 color 属性来修改文字的颜色。
那么我们第一步要做的就是，找到要修改样式的组件所对应的元素类名, 这个时候我就打开控制台的审查元素。
然后我就可以看到，数字角标组件所对应的元素类名是 uni-badge，那么我们就可以通过修改 uni-badge 这个类名来修改组件的样式。
我这里可以很明确的告诉大家这样修改是不行的，要想修改组件样式有两种方案，分别是：
- 利用 Vue 的深度修改
:deep - 利用全局属性
:global修改
好，那么知道了方案我们就可以开始修改了，首先我们来看一下第一种方案，利用 Vue 的深度修改 :deep。
<style>
:deep(.uni-badge) {
color: #000;
border-radius: 5px;
}
</style>
- 运行在 H5 端的效果如下：
可以看到是一点问题都没有的，那么我们再来看一下运行在微信小程序端的效果：
可以看到是没有起效果的，那么这是为什么呢？因为我们没有加 !important，我们要将优先级提高, 加上 !important 之后，再来看一下效果：
注意：最好在修改的属性后面加上
!important，否则有的平台可能无效，上面已经验证过了
第二种方案，利用全局属性 :global 修改，这个方案就比较简单了，直接上代码：
<style>
:global(.uni-badge) {
color: #000 !important;
border-radius: 5px !important;
}
</style>
这里我就不贴效果图了，大家可以自己去运行一下，效果是一样的。
总结
- 本篇文章主要给大家介绍了 uni-app-修改组件主题和样式的内容
- 通过本篇文章的学习，相信大家对 uni-app-修改组件主题和样式有了一定的了解
- 本篇文章的内容就介绍到这里，感谢大家的阅读，如果有什么不足的地方，欢迎大家指出，我会及时修改的，谢谢大家的支持
最后
大家好我是 BNTang, 一个热爱分享的技术的开发者，如果大家觉得我的文章对你有帮助的话，可以关注我的公众号 JavaBoyL，我会在公众号中分享一些IT技术和一些个人的见解，谢谢大家的支持。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了