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-familyСистемный стек шрифтовСемейство шрифтов
--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-2xl24px2x очень большой отступ

Границы

ПеременнаяПо умолчаниюОписание
--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-popup50Z-index всплывающего окна
--rdrp-z-day-button20Z-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, поэтому обертывание средства выбора в div с пользовательским font-family применяется ко всему тексту. В этом примере используется DateRangePicker со шрифтом Georgia с засечками.

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