修改antd 里日期选择器DatePicker 的默认样式

最新推荐文章于 2024-01-24 16:23:17 发布

Dark_programmer

最新推荐文章于 2024-01-24 16:23:17 发布

阅读量8.7k

点赞数

分类专栏： antd 文章标签： UI框架

本文链接：https://blog.csdn.net/Dark_programmer/article/details/108266431

版权

antd 专栏收录该内容

6 篇文章

订阅专栏

本文分享了如何通过自定义CSS样式来美化Ant Design框架中的日期选择器，重点介绍了修改选中日期背景色、鼠标悬停效果及今日按钮颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd框架属实好用，但是UI美观度却不尽人意

那么，日期选择器的UI该如何修改呢？

这里只修改了颜色部分

:global{
  // 修改 日期选择框的属性
  .ant-calendar-selected-day > .ant-calendar-date {  // 选中 当前日期的 背景色
    background-color: rgba(132, 63, 255,0.8);
  }
  .ant-calendar-date:hover{   // 鼠标的hover效果
    background-color: rgba(132, 63, 255,0.4);
  }
  .ant-calendar-today > .ant-calendar-date{
    color: rgba(132, 63, 255,0.8);
    border-color:  rgba(132, 63, 255,0.4);
  }

  .ant-calendar-today-btn{
    color: rgb(132, 63, 255);
  }
}