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

news/2025/3/16 5:01:56/

日历组件默认样式如下图,但是我不想要右上角的红点,并且日期下面的数字要加红色背景,变成圆形,还是先用元素检查找到元素的类名,然后通过/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.ppmy.cn/news/1124875.html

相关文章

Linux学习第19天:Linux并发与竞争实例: 没有规矩不成方圆

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 先说点题外话&#xff0c;上周参加行业年会&#xff0c;停更了一周。接下来的周五就要开启国庆中秋双节模式&#xff0c;所以有的时候&#xff0c;尤其是工作以后…

【Spring Boot】实战:实现数据缓存框架

🌿欢迎来到@衍生星球的CSDN博文🌿 🍁本文主要学习【Spring Boot】实现数据缓存框架 🍁 🌱我是衍生星球,一个从事集成开发的打工人🌱 ⭐️喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路⭐️💠作为一名热衷于分享知识的程序员,我乐于在CSDN上与广大开发者…

ElementUI实现登录注册啊,axios全局配置,CORS跨域

一&#xff0c;项目搭建 认识ElementUI ElementUI是一个基于Vue.js 2.0的桌面端组件库&#xff0c;它提供了一套丰富的UI组件&#xff0c;包括表格、表单、弹框、按钮、菜单等常用组件&#xff0c;具备易用、美观、高效、灵活等优势&#xff0c;能够极大的提高Web应用的开发效…

el-table-column默认选中一个复选框和只能单选事件

表格代码 <el-table ref"contractTable" v-loading"loading" :data"contractList" selection-change"contractSelectionChange" style"margin-top: 10%;"><el-table-column type"selection" width"…

http的get与post

get方法&#xff1a; 这个网址可以获取配置信息&#xff08;我把部分位置字符改了&#xff0c;现在打不开了&#xff0c;不然会被追责&#xff09; http://softapi.s103.cn/addons/Kmdsoft/Index/config?productwxdk&partner_id111122&osWindows&os_version11&am…

计算机视觉与深度学习-经典网络解析-AlexNet-[北邮鲁鹏]

这里写目录标题 AlexNet参考文章AlexNet模型结构AlexNet共8层&#xff1a;AlexNet运作流程 简单代码实现重要说明重要技巧主要贡献 AlexNet AlexNet 是一种卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;的架构。它是由Alex Krizhevsky、Il…

【产品运营】如何提升B端产品竞争力(下)

“好产品不是能力内核&#xff0c;做好产品的流程才是” 一、建立需求池和需求反馈渠道 需求池管理是B端产品进化最重要的环节&#xff0c;它的重要性远超产品设计、开发等其他环节。 维护需求池有主动和被动两种。 主动维护是产品经理在参与售前、迭代、交付、售后、竞品分…

MAC word 如何并列排列两张图片

系统&#xff1a;MAC os 参考博客 https://baijiahao.baidu.com/s?id1700824516945958911&wfrspider&forpc 步骤1 新建一个word文档和表格 修改表格属性 去掉自动重调尺寸以适应内容 插入图片 在表格的位置插入对应的图片如下 去除边框 最终结果如下