顏色

Tailwind v3 套件使用寫死的 Tailwind 功能類別（例如 bg-sky-500），而非 CSS 變數。若要切換顏色，請使用 Compound API 並動態覆寫日期類別名稱：

ℹ️ Info

與使用 CSS 變數的 styled 套件不同，Tailwind v3 需要使用 Compound API 在執行時覆寫顏色。詳情請參閱主題覆寫。

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind3";

const themes = {
  default: {
    selected: "bg-sky-500 text-white font-semibold hover:bg-sky-500/90",
    today: "font-bold text-sky-500",
    confirm: "bg-sky-500 hover:bg-sky-600",
  },
  purple: {
    selected: "bg-violet-500 text-white font-semibold hover:bg-violet-500/90",
    today: "font-bold text-violet-500",
    confirm: "bg-violet-500 hover:bg-violet-600",
  },
  rose: {
    selected: "bg-rose-500 text-white font-semibold hover:bg-rose-500/90",
    today: "font-bold text-rose-500",
    confirm: "bg-rose-500 hover:bg-rose-600",
  },
  emerald: {
    selected: "bg-emerald-500 text-white font-semibold hover:bg-emerald-500/90",
    today: "font-bold text-emerald-500",
    confirm: "bg-emerald-500 hover:bg-emerald-600",
  },
};

type ThemeName = keyof typeof themes;

function CompoundColorTheme() {
  const [value, setValue] = useState<Date | null>(null);
  const [theme, setTheme] = useState<ThemeName>("default");
  const t = themes[theme];

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        {(Object.keys(themes) as ThemeName[]).map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "4px 12px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              color: theme === name ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue} inline>
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid daySelectedClassName={t.selected} dayTodayClassName={t.today} />
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}

March 2026

彈出視窗模式

同樣的技巧也適用於彈出式選擇器：

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind3";

const themes = {
  default: {
    selected: "bg-sky-500 text-white font-semibold hover:bg-sky-500/90",
    today: "font-bold text-sky-500",
    confirm: "bg-sky-500 hover:bg-sky-600",
    trigger: "",
  },
  purple: {
    selected: "bg-violet-500 text-white font-semibold hover:bg-violet-500/90",
    today: "font-bold text-violet-500",
    confirm: "bg-violet-500 hover:bg-violet-600",
    trigger: "hover:border-violet-500/50 focus-visible:ring-violet-500",
  },
  rose: {
    selected: "bg-rose-500 text-white font-semibold hover:bg-rose-500/90",
    today: "font-bold text-rose-500",
    confirm: "bg-rose-500 hover:bg-rose-600",
    trigger: "hover:border-rose-500/50 focus-visible:ring-rose-500",
  },
  emerald: {
    selected: "bg-emerald-500 text-white font-semibold hover:bg-emerald-500/90",
    today: "font-bold text-emerald-500",
    confirm: "bg-emerald-500 hover:bg-emerald-600",
    trigger: "hover:border-emerald-500/50 focus-visible:ring-emerald-500",
  },
};

type ThemeName = keyof typeof themes;

function CompoundColorThemePopup() {
  const [value, setValue] = useState<Date | null>(null);
  const [theme, setTheme] = useState<ThemeName>("default");
  const t = themes[theme];

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        {(Object.keys(themes) as ThemeName[]).map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "4px 12px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              color: theme === name ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue}>
        <DatePicker.Trigger className={t.trigger} />
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid daySelectedClassName={t.selected} dayTodayClassName={t.today} />
          <DatePicker.Footer>
            <DatePicker.ClearButton />
            <DatePicker.CancelButton />
            <DatePicker.ConfirmButton className={t.confirm} />
          </DatePicker.Footer>
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}