CSS 变量

styled 包对所有视觉值都使用 CSS 自定义属性（变量）。在 .rdrp-root 或任何父元素上覆盖它们，即可在不接触组件代码的情况下自定义外观。

如何覆盖

所有变量都作用于 .rdrp-root 之下。在你自己的 CSS 中覆盖它们：

/* Your custom theme */
.rdrp-root {
  --rdrp-color-primary: #8b5cf6;
  --rdrp-color-primary-hover: #7c3aed;
  --rdrp-border-radius-lg: 12px;
}

或者使用包装器类将覆盖范围限定到特定实例：

.my-purple-picker .rdrp-root {
  --rdrp-color-primary: #8b5cf6;
  --rdrp-color-primary-hover: #7c3aed;
  --rdrp-color-primary-light: #ede9fe;
  --rdrp-color-primary-lighter: #f5f3ff;
}
<div className="my-purple-picker">
  <DatePicker value={value} onChange={setValue} />
</div>

变量参考

颜色

变量默认 (亮色)描述
--rdrp-color-primary#3b82f6主要操作颜色（选中日期、确认按钮）
--rdrp-color-primary-hover#2563eb主要悬停状态
--rdrp-color-primary-light#dbeafe范围背景，浅色主色调
--rdrp-color-primary-lighter#eff6ff激活的预设背景
--rdrp-color-primary-disabled#93c5fd禁用的确认按钮
--rdrp-color-bg#ffffff背景颜色
--rdrp-color-bg-hover#f3f4f6日期、按钮的悬停背景
--rdrp-color-bg-subtle#f9fafb次要背景
--rdrp-color-text#374151默认文本颜色
--rdrp-color-text-strong#111827强调文本（标题、活动时间）
--rdrp-color-text-muted#6b7280弱化文本（导航按钮、标签）
--rdrp-color-text-placeholder#6b7280占位符文本
--rdrp-color-text-disabled#d1d5db禁用日期的文本
--rdrp-color-text-outside#9ca3af非本月日期的文本
--rdrp-color-text-inverse#ffffff主背景上的文本
--rdrp-color-text-danger#ef4444清除/危险按钮的文本
--rdrp-color-text-today#2563eb今日指示器颜色
--rdrp-color-border#d1d5db默认边框
--rdrp-color-border-light#e5e7eb浅色边框（弹窗、选择框）
--rdrp-color-border-subtle#f3f4f6次要边框（页脚、预设）
--rdrp-color-border-hover#93c5fd边框悬停状态
--rdrp-color-highlight-dot#f59e0b高亮点的颜色
--rdrp-highlight-dot-size4px高亮点的直径
--rdrp-color-range-bg#dbeafe范围内日期的背景
--rdrp-color-hover-range-bg#eff6ff悬停范围预览背景
--rdrp-color-hover-target-bg#bfdbfe悬停端点背景
--rdrp-color-time-highlightrgba(59, 130, 246, 0.08)时间面板高亮条

字体

变量默认描述
--rdrp-font-familySystem font stack字体族
--rdrp-font-size-xs11px特小（小尺寸下的星期头部）
--rdrp-font-size-sm12px小号（星期头部、标签）
--rdrp-font-size-base13px基础（日期单元格、按钮）
--rdrp-font-size-md14px中号（触发器、时间项）
--rdrp-font-size-lg15px大号（头部标题）
--rdrp-font-weight-normal400常规字重
--rdrp-font-weight-medium500中等字重
--rdrp-font-weight-semibold600半粗字重
--rdrp-font-weight-bold700粗体字重（今日指示器）

间距

变量默认描述
--rdrp-spacing-xs2px特小间距
--rdrp-spacing-sm4px小间距
--rdrp-spacing-md8px中间距
--rdrp-spacing-lg12px大间距
--rdrp-spacing-xl16px特大间距
--rdrp-spacing-2xl24px2倍特大间距

边框

变量默认描述
--rdrp-border-radius-sm4px小圆角
--rdrp-border-radius-md6px中圆角（按钮、选择框）
--rdrp-border-radius-lg8px大圆角（日期、触发器）
--rdrp-border-radius-xl12px特大圆角（弹窗）
--rdrp-border-radius-full9999px全圆角（高亮点）
--rdrp-border-width1px边框宽度

阴影

变量默认描述
--rdrp-shadow-popup0 10px 25px rgba(0,0,0,0.1)弹窗阴影
--rdrp-shadow-inline0 4px 12px rgba(0,0,0,0.06)内联模式阴影
--rdrp-shadow-sm0 2px 6px rgba(0,0,0,0.04)小阴影

尺寸

变量默认描述
--rdrp-cell-size36px日期单元格宽度/高度
--rdrp-nav-btn-size28px导航按钮尺寸
--rdrp-weekday-height28px星期头部行高
--rdrp-grid-min-height216px日历网格最小高度
--rdrp-panel-min-width252px单个日历面板宽度
--rdrp-dual-gap24px双日历之间的间隙
--rdrp-trigger-min-width200px触发器按钮最小宽度
--rdrp-trigger-padding-x14px触发器水平内边距
--rdrp-trigger-padding-y8px触发器垂直内边距
--rdrp-popup-padding16px弹窗内部内边距
--rdrp-popup-gap6px弹窗内容间隙
--rdrp-btn-padding-x14px页脚按钮水平内边距
--rdrp-btn-padding-y6px页脚按钮垂直内边距
--rdrp-preset-min-width140px预设侧边栏最小宽度

时间选择器

变量默认描述
--rdrp-time-item-height32px时间滚动项高度
--rdrp-time-panel-height176px时间面板总高度
--rdrp-time-column-height160px可滚动列高度
--rdrp-time-panel-min-width120px时间面板最小宽度
--rdrp-time-colon-width12px冒号分隔符宽度

Z-index

变量默认描述
--rdrp-z-popup50弹窗 z-index
--rdrp-z-day-button20聚焦日期的 z-index

过渡

变量默认描述
--rdrp-transition-fast0.1s快速过渡（日期悬停）
--rdrp-transition-normal0.15s常规过渡（触发器、按钮）

实时示例

自定义颜色（紫色主题）

覆盖主色变量以创建完全不同的配色方案。此示例使用带有紫罗兰/紫色调的 DatePicker。

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CustomColors() {
  const [value, setValue] = useState<Date | null>(null);


  return (
    <div
      style={
        {
          "--rdrp-color-primary": "#7c3aed",
          "--rdrp-color-primary-hover": "#6d28d9",
          "--rdrp-color-primary-light": "#ede9fe",
          "--rdrp-color-primary-lighter": "#f5f3ff",
          "--rdrp-color-primary-disabled": "#c4b5fd",
          "--rdrp-color-text-today": "#7c3aed",
          "--rdrp-color-border-hover": "#c4b5fd",
        } as React.CSSProperties
      }
    >
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

自定义字体 (Serif)

字体通过 CSS 继承，因此将选择器包装在具有自定义 font-family 的 div 中会应用于所有文本。此示例使用带有 Georgia serif 字体的 DateRangePicker。

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CustomFont() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });


  return (
    <div style={{ fontFamily: "'Georgia', serif" }}>
      <DateRangePicker value={value} onChange={setValue} />
    </div>
  );
}

直角（无边框圆角）

将所有边框圆角变量设置为 0px 以获得完全方正的外观。

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CustomBorderRadius() {
  const [value, setValue] = useState<Date | null>(null);


  return (
    <div
      style={
        {
          "--rdrp-border-radius-sm": "0px",
          "--rdrp-border-radius-md": "0px",
          "--rdrp-border-radius-lg": "0px",
          "--rdrp-border-radius-xl": "0px",
        } as React.CSSProperties
      }
    >
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

通过 CSS 变量自定义尺寸

除了使用内置的 size prop 外，还可以覆盖单个尺寸变量以进行精确控制。此示例使用具有自定义单元格尺寸和字体大小的 DateRangePicker。

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CustomSize() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });


  return (
    <div
      style={
        {
          "--rdrp-cell-size": "44px",
          "--rdrp-font-size-base": "15px",
          "--rdrp-font-size-md": "16px",
          "--rdrp-font-size-lg": "18px",
          "--rdrp-spacing-sm": "6px",
          "--rdrp-spacing-md": "10px",
          "--rdrp-spacing-lg": "14px",
        } as React.CSSProperties
      }
    >
      <DateRangePicker value={value} onChange={setValue} />
    </div>
  );
}