【UniApp】-uni-app-修改组件主题和样式

前言

  • 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-扩展组件
  • 那么了解完了uni-app-扩展组件之后,这篇文章来给大家介绍一下 uni-app-修改组件主题和样式
  • 首先不管三七二十一,先来新建一个项目

搭建演示环境

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

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

  • 经过如上的这么一顿操作之后,就可以搭建完毕运行环境,与编码环境
  • 接下来就可以开始进行介绍 uni-app-修改组件主题和样式内容了

步入正题

修改组件主题

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

<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技术和一些个人的见解,谢谢大家的支持。

posted @ 2023-12-10 03:32  BNTang  阅读(2202)  评论(1编辑  收藏  举报