【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 这个类名来修改组件的样式。

我这里可以很明确的告诉大家这样修改是不行的，要想修改组件样式有两种方案，分别是：

1. 利用 Vue 的深度修改 :deep
2. 利用全局属性 :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技术和一些个人的见解，谢谢大家的支持。

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！