当前位置: 首页 > news >正文

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

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

相关文章:

  • Lombok @Accessors(chain = true) 导致 FastJson parsObject()对父类属性失效
  • Aztec交易架构解析
  • 商品秒杀系统整理
  • C语言实现八种功能的通讯录(添加、删除、查找、修改、显示、排序、退出、清空)
  • 视频监控/视频汇聚/安防视频监控平台EasyCVR配置集群后有一台显示离线是什么原因?
  • 【RabbitMQ实战】02 生产者和消费者示例
  • Linux下ThinkPHP5实现定时器任务 - 结合crontab
  • 3dsmax模型烘焙光照贴图并导入unity流程详解
  • 安卓生成公钥和md5签名
  • pwndbg安装(gdb插件)
  • SpringBoot 学习(二)配置
  • 西门子828d授权密钥破解经验分享 I7I54833762
  • 06贪心:跳跃游戏
  • 鄙视测试,理解测试,成为测试
  • MySQL数据库基础知识要点总结
  • 基础运维(一)YUM仓库
  • 递归算法讲解,深度理解递归
  • 网络通信(套接字通信)(C/C++)
  • anaconda navigator启动时一直卡在 loading applications 页面
  • 力扣刷题-链表-删除链表的倒数第N个节点
  • Blender DreamUV插件使用简明教程
  • AI在线工具分享
  • Matlab批量处理测试数据的方法:以VCO的调谐测试曲线处理为例
  • VScode断点调试vue
  • 20吨屠宰鸡鸭鹅一体化污水处理设备加工厂家
  • android被杀以后fragments缓存重建问题和测试方法
  • Visual Studio 2017 安装
  • day5|242.有效的字母异位词、349. 两个数组的交集
  • 【Python基础】常用模块学习:sys|os|pytest
  • 【煤矿虚拟仿真体验】VR采煤机技能培训有效提高训练效果