Tipografía

El paquete styled usa una pila de fuentes del sistema por defecto:

--rdrp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

Esto se renderiza con la fuente nativa del sistema operativo en cada plataforma (San Francisco en macOS, Segoe UI en Windows, Roboto en Android). Las fuentes del sistema proporcionan un buen soporte multilingüe ya que el sistema operativo maneja automáticamente las alternativas para CJK, árabe y otros scripts.

Para sobrescribir, establece --rdrp-font-family en cualquier elemento ancestro — se propaga en cascada al selector.

Estilo en Línea con Variable CSS

Sobrescribe la fuente a través del atributo style en un elemento contenedor:

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

function CSSCustomFont() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div
      style={{
        ["--rdrp-font-family" as string]: '"Georgia", "Times New Roman", serif',
      }}
    >
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Familia de Fuentes

Cambia entre familias de fuentes estableciendo --rdrp-font-family en un contenedor:

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

const fonts = {
  System: {},
  Serif: { "--rdrp-font-family": '"Georgia", "Times New Roman", serif' },
  Mono: { "--rdrp-font-family": '"Menlo", "Courier New", monospace' },
};

type FontName = keyof typeof fonts;

function CompoundCustomFont() {
  const [value, setValue] = useState<Date | null>(null);
  const [font, setFont] = useState<FontName>("System");

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {(Object.keys(fonts) as FontName[]).map((name) => (
          <button
            key={name}
            onClick={() => setFont(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${font === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: font === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <div style={fonts[font] as React.CSSProperties}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

Usando Web Fonts (Noto Sans)

Para un renderizado consistente entre plataformas o proyectos de i18n, carga una web font como Noto Sans y sobrescribe la variable:

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

// 1. Carga Noto Sans en tu HTML o CSS:
//    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

// 2. Sobrescribe la variable de la fuente:
<div style={{ "--rdrp-font-family": '"Noto Sans", sans-serif' } as React.CSSProperties}>
  <DatePicker value={value} onChange={setValue} inline />
</div>;

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

function CompoundNotoSans() {
  const [value, setValue] = useState<Date | null>(null);

  useEffect(() => {
    // Load Noto Sans from Google Fonts (for demo purposes only)
    if (!document.getElementById("noto-sans-font")) {
      const link = document.createElement("link");
      link.id = "noto-sans-font";
      link.rel = "stylesheet";
      link.href =
        "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap";
      document.head.appendChild(link);
    }
  }, []);

  return (
    <div style={{ "--rdrp-font-family": '"Noto Sans", sans-serif' } as React.CSSProperties}>
      <DatePicker value={value} onChange={setValue} inline />
    </div>
  );
}

March 2026

Galería de Web Fonts

Compara diferentes web fonts para ver cómo la tipografía cambia drásticamente la apariencia del selector. Todas las fuentes a continuación soportan renderizado multilingüe (Latino, CJK, Coreano).

⚠️ Solo para demostración

Las fuentes a continuación se cargan desde el CDN de Google Fonts para fines de demostración. Esta librería no incluye ninguna web font — necesitas cargarlas en tu propio proyecto.

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

const WEB_FONTS = [
  { name: "Noto Sans", family: '"Noto Sans", sans-serif' },
  { name: "Noto Serif", family: '"Noto Serif", serif' },
  { name: "IBM Plex Sans", family: '"IBM Plex Sans", sans-serif' },
  { name: "Roboto Slab", family: '"Roboto Slab", serif' },
];

const FONT_URL =
  "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Noto+Serif:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;600;700&display=swap";

function CompoundWebFonts() {
  const [value, setValue] = useState<Date | null>(null);
  const [active, setActive] = useState(0);

  useEffect(() => {
    if (!document.getElementById("web-fonts-link")) {
      const link = document.createElement("link");
      link.id = "web-fonts-link";
      link.rel = "stylesheet";
      link.href = FONT_URL;
      document.head.appendChild(link);
    }
  }, []);

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12, flexWrap: "wrap" }}>
        {WEB_FONTS.map((f, i) => (
          <button
            key={f.name}
            onClick={() => setActive(i)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${active === i ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: active === i ? "#eff6ff" : "#fff",
              color: active === i ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              fontFamily: f.family,
            }}
          >
            {f.name}
          </button>
        ))}
      </div>
      <div style={{ "--rdrp-font-family": WEB_FONTS[active].family } as React.CSSProperties}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

Tamaño y Grosor de Fuente

Ajusta la densidad de la tipografía sobrescribiendo las variables de tamaño y grosor:

Variable	Predeterminado	Descripción
`--rdrp-font-size-xs`	`11px`	Texto más pequeño
`--rdrp-font-size-sm`	`12px`	Etiquetas de días de la semana
`--rdrp-font-size-base`	`13px`	Celdas de día, botones
`--rdrp-font-size-md`	`14px`	Activador, elementos de hora
`--rdrp-font-size-lg`	`15px`	Título del mes
`--rdrp-font-weight-normal`	`400`	Grosor base
`--rdrp-font-weight-medium`	`500`	Énfasis medio
`--rdrp-font-weight-semibold`	`600`	Días seleccionados, títulos
`--rdrp-font-weight-bold`	`700`	Indicador de hoy

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

const presets = {
  Compact: {
    "--rdrp-font-size-xs": "9px",
    "--rdrp-font-size-sm": "10px",
    "--rdrp-font-size-base": "11px",
    "--rdrp-font-size-md": "12px",
    "--rdrp-font-size-lg": "13px",
    "--rdrp-font-weight-semibold": "500",
    "--rdrp-font-weight-bold": "600",
  },
  Default: {},
  Large: {
    "--rdrp-font-size-xs": "13px",
    "--rdrp-font-size-sm": "14px",
    "--rdrp-font-size-base": "15px",
    "--rdrp-font-size-md": "16px",
    "--rdrp-font-size-lg": "18px",
    "--rdrp-font-weight-semibold": "700",
    "--rdrp-font-weight-bold": "800",
  },
};

type PresetName = keyof typeof presets;

function CompoundCustomFontPopup() {
  const [value, setValue] = useState<Date | null>(null);
  const [preset, setPreset] = useState<PresetName>("Default");

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {(Object.keys(presets) as PresetName[]).map((name) => (
          <button
            key={name}
            onClick={() => setPreset(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${preset === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: preset === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <div style={presets[preset] as React.CSSProperties}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026