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

또는 래퍼(wrapper) 클래스를 사용하여 특정 인스턴스에만 재정의를 적용할 수 있습니다:

.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`	기본 호버(hover) 상태
`--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`	밝은 테두리 (팝업, select 요소)
`--rdrp-color-border-subtle`	`#f3f4f6`	미세한 테두리 (푸터, 프리셋)
`--rdrp-color-border-hover`	`#93c5fd`	테두리 호버 상태
`--rdrp-color-highlight-dot`	`#f59e0b`	강조 점 색상
`--rdrp-highlight-dot-size`	`4px`	강조 점 지름
`--rdrp-color-range-bg`	`#dbeafe`	범위 내 날짜 배경
`--rdrp-color-hover-range-bg`	`#eff6ff`	호버 시 범위 미리보기 배경
`--rdrp-color-hover-target-bg`	`#bfdbfe`	호버 시 끝점 배경
`--rdrp-color-time-highlight`	`rgba(59, 130, 246, 0.08)`	시간 패널 강조 바

타이포그래피

변수	기본값	설명
`--rdrp-font-family`	System font stack	폰트 패밀리
`--rdrp-font-size-xs`	`11px`	아주 작음 (작은 크기의 요일 헤더)
`--rdrp-font-size-sm`	`12px`	작음 (요일 헤더, 라벨)
`--rdrp-font-size-base`	`13px`	기본 (날짜 셀, 버튼)
`--rdrp-font-size-md`	`14px`	중간 (트리거, 시간 항목)
`--rdrp-font-size-lg`	`15px`	큼 (헤더 제목)
`--rdrp-font-weight-normal`	`400`	보통 굵기
`--rdrp-font-weight-medium`	`500`	중간 굵기
`--rdrp-font-weight-semibold`	`600`	약간 굵은 굵기
`--rdrp-font-weight-bold`	`700`	굵은 굵기 (오늘 날짜 표시)

간격

변수	기본값	설명
`--rdrp-spacing-xs`	`2px`	아주 좁은 간격
`--rdrp-spacing-sm`	`4px`	좁은 간격
`--rdrp-spacing-md`	`8px`	중간 간격
`--rdrp-spacing-lg`	`12px`	넓은 간격
`--rdrp-spacing-xl`	`16px`	아주 넓은 간격
`--rdrp-spacing-2xl`	`24px`	2배 아주 넓은 간격

테두리

변수	기본값	설명
`--rdrp-border-radius-sm`	`4px`	작은 둥근 모서리
`--rdrp-border-radius-md`	`6px`	중간 둥근 모서리 (버튼, select 요소)
`--rdrp-border-radius-lg`	`8px`	큰 둥근 모서리 (날짜, 트리거)
`--rdrp-border-radius-xl`	`12px`	아주 큰 둥근 모서리 (팝업)
`--rdrp-border-radius-full`	`9999px`	완전한 둥근 모서리 (강조 점)
`--rdrp-border-width`	`1px`	테두리 두께

그림자

변수	기본값	설명
`--rdrp-shadow-popup`	`0 10px 25px rgba(0,0,0,0.1)`	팝업 그림자
`--rdrp-shadow-inline`	`0 4px 12px rgba(0,0,0,0.06)`	인라인 모드 그림자
`--rdrp-shadow-sm`	`0 2px 6px rgba(0,0,0,0.04)`	작은 그림자

크기

변수	기본값	설명
`--rdrp-cell-size`	`36px`	날짜 셀 너비/높이
`--rdrp-nav-btn-size`	`28px`	네비게이션 버튼 크기
`--rdrp-weekday-height`	`28px`	요일 헤더 행 높이
`--rdrp-grid-min-height`	`216px`	달력 그리드 최소 높이
`--rdrp-panel-min-width`	`252px`	단일 달력 패널 너비
`--rdrp-dual-gap`	`24px`	듀얼 달력 사이의 간격
`--rdrp-trigger-min-width`	`200px`	트리거 버튼 최소 너비
`--rdrp-trigger-padding-x`	`14px`	트리거 가로 패딩
`--rdrp-trigger-padding-y`	`8px`	트리거 세로 패딩
`--rdrp-popup-padding`	`16px`	팝업 내부 패딩
`--rdrp-popup-gap`	`6px`	팝업 콘텐츠 간격
`--rdrp-btn-padding-x`	`14px`	푸터 버튼 가로 패딩
`--rdrp-btn-padding-y`	`6px`	푸터 버튼 세로 패딩
`--rdrp-preset-min-width`	`140px`	프리셋 사이드바 최소 너비

시간 선택기

변수	기본값	설명
`--rdrp-time-item-height`	`32px`	시간 스크롤 항목 높이
`--rdrp-time-panel-height`	`176px`	시간 패널 전체 높이
`--rdrp-time-column-height`	`160px`	스크롤 가능한 열 높이
`--rdrp-time-panel-min-width`	`120px`	시간 패널 최소 너비
`--rdrp-time-colon-width`	`12px`	콜론 구분자 너비

Z-인덱스

변수	기본값	설명
`--rdrp-z-popup`	`50`	팝업 z-index
`--rdrp-z-day-button`	`20`	포커스된 날짜 z-index

트랜지션

변수	기본값	설명
`--rdrp-transition-fast`	`0.1s`	빠른 트랜지션 (날짜 호버)
`--rdrp-transition-normal`	`0.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 세리프 폰트를 사용한 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>
  );
}

날카로운 모서리 (Border Radius 없음)

모든 border radius 변수를 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>
  );
}