CSS 變數

styled 套件使用 CSS 自訂屬性 (變數) 來控制所有視覺值。您可以在 .rdrp-root 或任何父層元素上覆寫它們，以自訂外觀，而無需修改元件程式碼。

如何覆寫

所有變數都作用於 .rdrp-root 之下。在您自己的 CSS 中覆寫它們：

/* 您的自訂主題 */
.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>
  );
}

自訂字體 (襯線體)

字體透過 CSS 層疊，因此將選擇器包裝在具有自訂 font-family 的 div 中會套用到所有文字。此範例使用帶有 Georgia 襯線體的 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 屬性。此範例使用具有自訂儲存格尺寸和字體大小的 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>
  );
}