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