Màu sắc

Chuyển đổi chủ đề màu sắc trong thời gian chạy bằng cách ghi đè các thuộc tính tùy chỉnh CSS trên một phần tử bao bọc. Gói styled sử dụng --rdrp-color-primary, --rdrp-color-primary-hover, --rdrp-color-primary-light, và --rdrp-color-primary-lighter cho tất cả các màu nhấn chính.

Trình chuyển đổi chủ đề nội tuyến

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


const themes: Record<string, React.CSSProperties> = {
  default: {},
  purple: {
    "--rdrp-color-primary": "#8b5cf6",
    "--rdrp-color-primary-hover": "#7c3aed",
    "--rdrp-color-primary-light": "#ede9fe",
    "--rdrp-color-primary-lighter": "#f5f3ff",
  } as React.CSSProperties,
  rose: {
    "--rdrp-color-primary": "#f43f5e",
    "--rdrp-color-primary-hover": "#e11d48",
    "--rdrp-color-primary-light": "#ffe4e6",
    "--rdrp-color-primary-lighter": "#fff1f2",
  } as React.CSSProperties,
  emerald: {
    "--rdrp-color-primary": "#10b981",
    "--rdrp-color-primary-hover": "#059669",
    "--rdrp-color-primary-light": "#d1fae5",
    "--rdrp-color-primary-lighter": "#ecfdf5",
  } as React.CSSProperties,
};


const themeNames = Object.keys(themes);


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


  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {themeNames.map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue} inline style={themes[theme]}>
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid />
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}
March 2026
Su
Mo
Tu
We
Th
Fr
Sa

Trình chuyển đổi chủ đề Popup

Cách tiếp cận tương tự cũng hoạt động với bộ chọn popup:

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


const themes: Record<string, React.CSSProperties> = {
  default: {},
  purple: {
    "--rdrp-color-primary": "#8b5cf6",
    "--rdrp-color-primary-hover": "#7c3aed",
    "--rdrp-color-primary-light": "#ede9fe",
    "--rdrp-color-primary-lighter": "#f5f3ff",
  } as React.CSSProperties,
  rose: {
    "--rdrp-color-primary": "#f43f5e",
    "--rdrp-color-primary-hover": "#e11d48",
    "--rdrp-color-primary-light": "#ffe4e6",
    "--rdrp-color-primary-lighter": "#fff1f2",
  } as React.CSSProperties,
  emerald: {
    "--rdrp-color-primary": "#10b981",
    "--rdrp-color-primary-hover": "#059669",
    "--rdrp-color-primary-light": "#d1fae5",
    "--rdrp-color-primary-lighter": "#ecfdf5",
  } as React.CSSProperties,
};


const themeNames = Object.keys(themes);


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


  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {themeNames.map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue} style={themes[theme]}>
        <DatePicker.Trigger />
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid />
          <DatePicker.Footer>
            <DatePicker.ClearButton />
            <DatePicker.CancelButton />
            <DatePicker.ConfirmButton />
          </DatePicker.Footer>
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}

Kiểu nội tuyến với biến CSS

Bạn cũng có thể ghi đè màu sắc trực tiếp thông qua thuộc tính style trên một phần tử bao bọc:

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


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


  return (
    <div
      style={{
        ["--rdrp-color-primary" as string]: "#8b5cf6",
        ["--rdrp-color-primary-hover" as string]: "#7c3aed",
        ["--rdrp-color-primary-light" as string]: "#ede9fe",
        ["--rdrp-color-primary-lighter" as string]: "#f5f3ff",
        ["--rdrp-color-primary-disabled" as string]: "#c4b5fd",
        ["--rdrp-color-range-bg" as string]: "#ede9fe",
        ["--rdrp-color-hover-range-bg" as string]: "#f5f3ff",
        ["--rdrp-color-hover-target-bg" as string]: "#ddd6fe",
        ["--rdrp-color-text-today" as string]: "#7c3aed",
        ["--rdrp-color-border-hover" as string]: "#c4b5fd",
      }}
    >
      <DateRangePicker value={value} onChange={setValue} />
    </div>
  );
}