前言

搭建演示环境

创建一个全新的项目，因为本文要修改组件主题和样式，所以这次创建项目选择 uni-ui 模板：

然后在配置一下，微信小程序的 AppId，直接去之前的项目服务器托管网中拷贝一下即可，找到之前项目的 manifest.json 文件，然后选择微信小程序配置，复制一下即可。

首先我们来看一下，uni-app-修改组件主题的官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-sass.html

我们先使用一下组件，然后在看完了样式之后我们在进行修改，这里我们使用数字角标组件，先来看一下效果：


	
		
		
		
	



	export default {
	}

运行一下，效果如下：

我通过发现这个数字角标组件的样式是根据 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。


	:deep(.uni-badge) {
		color: #000;
		border-radius: 5px;
	}

可以看到是一点问题都没有的，那么我们再来看一下运行在微信小程序端的效果：

可以看到是没有起效果的，那么这是为什么呢？因为我们没有加 !important，我们要将优先级提高, 加上 !important 之后，再来看一下效果：

注意：最好在修改的属性后面加上 !important，否则有的平台可能无效，上面已经验证过了

第二种方案，利用全局属性 :global 修改，这个方案就比较简单了，直接上代码：


	:global(.uni-badge) {
		color: #000 !important;
		border-radius: 5px !important;
	}

这里我就不贴效果图了，大家可以自己去运行一下，效果是一样的。

大家好我是 BNTang, 一个热爱分享的技术的开发者，如果大家觉得我的文章对你有帮助的话，可以关注我的公众号 JavaBoyL，我会在公众号中分享一些IT技术和一些个人的见解，谢谢大家的支持。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net