uniapp:如何修改组件默认样式

news2024/11/25 10:13:44

日历组件默认样式如下图,但是我不想要右上角的红点,并且日期下面的数字要加红色背景,变成圆形,还是先用元素检查找到元素的类名,然后通过/deep/来覆盖样式,需要注意的是,lang要scss或者less,lang必须要写,否则不生效。

不显示红点,将背景色设置为透明即可。

其他元素都用同样的方法覆盖样式。

<style lang="scss" scoped>
	// 右上角红点颜色设置为透明
	/deep/ .uni-calendar-item__weeks-box-circle {
	    background-color:transparent;
	}
	// 日期下面的数字加红色背景,设置为圆形
	/deep/ .uni-calendar-item--extra {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #d63a2b;
	    color: #fff;
	}
	// 今天的日期背景修改为红色
	/deep/ .uni-calendar-item--isDay {
	    background-color: #d63a2b;
	}
	// 被点击日期的背景色修改为红色
	/deep/ .uni-calendar-item--checked {
	    background-color: #d63a2b;
	}
	
</style>

最终效果:

进过样式覆盖后,基本效果都达到了预期。

但是今日的颜色还是蓝色,我试了一下,用上述方法不管用,这时候就可以试试直接去组件里修改,通过全局搜索可以找到样式的具体在哪个文件里。

现在就把今日的颜色也改为红色了。

总结一下:先查找元素,然后用/deep/覆盖样式,如果无法覆盖,就直接去组件里修改样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1040583.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

硬件基本功--MOS管

一、上下拉电阻Rgs的作用 Rgs&#xff1a;经验值&#xff0c;一般取10K左右。 1. 上电时给MOS管的栅极一个确定的电平&#xff0c;防止上电时GPIO为高阻态时&#xff0c;MOS管的栅极电平不确定&#xff0c;从而受到干扰。 2. 断电时&#xff0c;如果MOS管是导通的状态&#xff…

北京智和信通亮相2023IT运维大会,共话数智浪潮下自动化运维新生态

2023年9月21日&#xff0c;由IT运维网、《网络安全和信息化》杂志社联合主办的“2023&#xff08;第十四届&#xff09;IT运维大会”在北京成功举办。大会以“以数为基 智引未来”为主题&#xff0c;北京智和信通技术有限公司&#xff08;下文简称&#xff1a;北京智和信通&…

火山引擎边缘云:数智化项目管理助力下的业务增长引擎

近日&#xff0c;“QCon全球软件开发大会2023北京站”、“第十二届中国PMO大会”、“2023第二届中国PMO&PM大会”相继召开&#xff0c;火山引擎边缘云项目管理团队受邀参加&#xff0c;并就项目管理相关主题开展分享。 会上&#xff0c;火山引擎边缘云项目管理负责人申建表…

TS编译器选项​——指定编译后文件所在目录

compilerOptions是TS的编译器选项&#xff0c;主要在tsconfig.json文件中用于对ts编译为js文件时进行配置 "compilerOptions" : { 配置项 } 在tsconfig.json中编写如下代码&#xff1a; {// compilerOptions 编译器选项"compilerOptions": {// outDir 用于…

QT程序打包图片无法正常显示

QT程序打包图片无法正常显示 环境&#xff1a; QT4.8.2VS2017opencv3.416 问题&#xff1a; 本机测试正常&#xff0c;图片可正常显示功能也可正常进行&#xff0c;但打包发送给没有环境数据的电脑上进行测试就会出现图片无法显示的问题。 原因&#xff1a; 并没有找到理论支撑…

投资理财知识分享:100个金融知识专业术语

大家好&#xff0c;我是财富智星&#xff0c;今天跟大家分享一下投资理财知识方面100个金融知识专业术语&#xff0c;希望能帮助大家了解更多金融知识。 1. 股票&#xff1a;代表对一家公司所有权的证券。 2. 债券&#xff1a;公司或政府发行的借款证券。 3. 投资组合&#xff…

AWS SAA 学习过程记录

共通 一些信息已经更新了&#xff0c;但参考题的答案还是旧的。 比如&#xff1a; S3的最大读写性能已经提高到 3,500 PUT/COPY/POST/DELETE or 5,500 GET/HEAD requests per second 并且不再要求使用random prefix Storage Amazon S3 为了提高读取的performance: For exam…

MySQL 笔试——多表连接查询

一、&#xff08;左、右和全&#xff09;连接概念 内连接&#xff1a; 假设A和B表进行连接&#xff0c;使用内连接的话&#xff0c;凡是A表和B表能够匹配上的记录查询出来。A和B两张表没有主付之分&#xff0c;两张表是平等的。 关键字&#xff1a;inner join on 语句&#xf…

2023-9-25 JZ6 从头到尾打印链表

题目链接&#xff1a;从头到尾打印链表 import java.util.*; /** * public class ListNode { * int val; * ListNode next null; * * ListNode(int val) { * this.val val; * } * } * */ import java.util.ArrayList; public c…

【MySql】2- 基础篇(下)

文章目录 1. MySQL锁1. 1 全局锁1. 2 表级锁1. 3 行锁1. 3 .1 两阶段锁1. 3 .2 死锁和死锁检测 2. 事务是否是隔离的?2.1 快照在MVCC中如何工作 1. MySQL锁 数据库锁设计的初衷是处理并发问题。作为多用户共享的资源&#xff0c;当出现并发访问的时候&#xff0c;数据库需要合…

Android修行手册 - Activity 在 Java 和 Kotlin 中怎么写构造参数

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…

无线通信——Mesh自组网的由来

阴差阳错找到了一个工作&#xff0c;是做无线通信的&#xff0c;因为无线设备采用Mesh&#xff0c;还没怎么接触过&#xff0c;网上搜索下发现Mesh的使用场景不多&#xff0c;大部分都是用在家里路由器上面。所以写了片关于Mesh网的文档。Mesh网可应用在无网络区域的地方&#…

创意如潮,看AIGC如何颠覆影视娱乐制作

“AIGC正颠覆影视娱乐的方方面面&#xff0c;未来三到五年&#xff0c;制作的方式、成本结构、人员结构等等一定会发生大变化。”爱奇艺创始人、CEO龚宇在9月21日的2023爱奇艺i JOY悦享会上这样说道&#xff0c;这番言论不仅引发了业内的广泛热议&#xff0c;也促使我们重新审视…

vue组件 data选项

vue组件 data选项 错的 App.vue <template><div class"app"><baseCount></baseCount><baseCount></baseCount><baseCount></baseCount></div> </template><script> import baseCount from &quo…

干货 | 基于深度学习的生态保护红线和生态空间管控区域内开发建设活动识别...

以下内容整理自2023年夏季学期大数据能力提升项目《大数据实践课》同学们所做的期末答辩汇报。 一、背景需求 本研究主要针对江苏省典型生态保护区域&#xff0c;通过计算机语义分割和变化检测的技术方法&#xff0c;以实现生态保护区内违法违规开发建设活动的智能监控。 项目的…

信息学奥赛一本通 2074:【21CSPJ普及组】分糖果(candy) | 洛谷 P7909 [CSP-J 2021] 分糖果

【题目链接】 ybt 2074&#xff1a;【21CSPJ普及组】分糖果&#xff08;candy&#xff09; 洛谷 P7909 [CSP-J 2021] 分糖果 【题目考点】 1. 数学 取模运算 【解题思路】 只要篮子中有大于等于n颗糖&#xff0c;就要分走n颗糖。最后剩下的归自己的糖的数量一定小于n。这…

第一百五十四回 如何实现滑动菜单

文章目录 概念介绍实现方法示例代码体验分享 我们在上一章回中介绍了滑动窗口相关的内容相关的内容&#xff0c;本章回中将介绍如何实现 滑动菜单.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在本章回中介绍的滑动菜单表示屏幕上向左或者向右滑动滑动时弹…

Android最好用的日志打印库(自动追踪日志代码位置)

给大家推荐一个自己写的日志打印的库&#xff0c;我愿称之为最强日志打印库&#xff1a;BytUtilLog Byt是Big一统的缩写&#xff0c;大一统日志打印库&#xff0c;哈哈&#xff01;搞个笑&#xff0c;很早就写好了&#xff0c;但后面忙起来就忘了写一篇文章推一下它了&#xff…

Spring 学习(八)事务管理

1. 事务 1.1 事务的 ACID 原则 数据库事务&#xff08;transaction&#xff09;是访问并可能操作各种数据项的一个数据库操作序列。事务必须满足 ACID 原则——即原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Iso…

Keycloak怎么接入短信登录

Keycloak的介绍 Keycloak是一个开源软体产品&#xff0c;旨在为现代的应用程式和服务&#xff0c;提供包含身份管理和访问管理功能的单点登录工具。截至2018年3月&#xff0c;红帽公司负责管理这一JBoss社区项目&#xff0c;并将其作为他们RH-SSO产品的上游项目。[2]从概念的角…