Màu sắc

Gói Tailwind v3 sử dụng các lớp tiện ích Tailwind được mã hóa cứng (ví dụ: bg-sky-500) thay vì các biến CSS. Để chuyển đổi màu sắc, hãy sử dụng API Compound và ghi đè tên lớp của ngày một cách linh động:

ℹ️ Info

Không giống như gói styled (sử dụng các biến CSS), Tailwind v3 yêu cầu API Compound để ghi đè màu sắc trong lúc chạy. Xem Ghi đè Giao diện để biết thêm chi tiết.

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

Kỹ thuật tương tự cũng hoạt động với bộ chọn dạng popup:

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>
  );
}