Bootstrap5项目中如何根据Figma设计调整daterangepicker日历样式？

针对你修改daterangepicker样式未生效的问题，可从以下几个方向排查并调整：

• 提升样式优先级
  daterangepicker自带的CSS优先级较高，若你的自定义样式未生效，可使用更具体的选择器，或确保自定义CSS在daterangepicker的CSS之后加载。示例：

  /* 精准定位选中日期的样式 */
  .daterangepicker .calendar-table td.active,
  .daterangepicker .calendar-table td.active:hover {
    background-color: #你的目标主色;
    border-color: #你的目标边框色;
    border-radius: 4px;
    color: #fff;
  }
  

• 确认DOM结构与类名
  打开浏览器开发者工具（F12），选中日历元素，查看实际渲染后的DOM类名。比如左右两个日历面板分别带有.left和.right类，若要单独调整某一侧的样式，可使用：

  .daterangepicker .left .calendar-table td {
    /* 左侧日历的自定义样式 */
  }
  

• 避免scoped样式限制
  若你在Vue/React等框架中使用了scoped样式，动态生成的daterangepicker元素无法被scoped样式覆盖，需使用深度选择器：

  • Vue3：::v-deep .daterangepicker .calendar-table td
  • Vue2：/deep/ .daterangepicker .calendar-table td

• 完整自定义样式示例（匹配Figma设计）
  以下是针对常见设计调整的代码模板，你可根据Figma参数修改颜色、圆角、间距等：

  /* 日历面板整体样式 */
  .daterangepicker {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border: none;
    padding: 12px;
  }
  
  /* 月份年份标题样式 */
  .daterangepicker .calendar-table thead tr:first-child th {
    color: #2d3748;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
  }
  
  /* 星期表头样式 */
  .daterangepicker .calendar-table thead tr:last-child th {
    color: #718096;
    font-size: 12px;
    font-weight: 400;
    padding: 6px 0;
  }
  
  /* 日期单元格默认样式 */
  .daterangepicker .calendar-table td {
    padding: 8px;
    border-radius: 4px;
    color: #4a5568;
    font-size: 13px;
  }
  
  /* 日期hover状态 */
  .daterangepicker .calendar-table td:hover:not(.disabled):not(.active) {
    background-color: #f7fafc;
    color: #2d3748;
  }
  
  /* 范围选中的中间日期 */
  .daterangepicker .calendar-table td.in-range {
    background-color: #ebf8ff;
    color: #2b6cb0;
    border-radius: 0;
  }
  
  /* 范围选中的起始/结束日期 */
  .daterangepicker .calendar-table td.active {
    background-color: #2b6cb0;
    color: #fff;
  }
  

内容的提问来源于stack exchange，提问作者Mery