Typografia

Pakiet dla Tailwind v4 używa domyślnej klasy font-sans Tailwind (ui-sans-serif, system-ui, sans-serif, ...). Ponieważ font-family w CSS jest dziedziczone, możesz nadpisać czcionkę pickera, opakowując go w kontener ze stylem fontFamily. Czcionka kontenera zostanie kaskadowo zastosowana do wszystkich elementów pickera.

Rodzina czcionek

Owiń picker i ustaw fontFamily na kontenerze, aby zmienić czcionki:

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";

const fonts = {
  system: "inherit",
  serif: "'Georgia', 'Times New Roman', serif",
  mono: "'JetBrains Mono', 'Fira Code', 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: 8, marginBottom: 16 }}>
        {(Object.keys(fonts) as FontName[]).map((name) => (
          <button
            key={name}
            onClick={() => setFont(name)}
            style={{
              padding: "4px 12px",
              borderRadius: 4,
              border: `1px solid ${font === name ? "#3b82f6" : "#d1d5db"}`,
              background: font === name ? "#eff6ff" : "#fff",
              color: font === name ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              fontFamily: fonts[name],
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <div style={{ fontFamily: fonts[font] }}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

Używanie czcionek internetowych (Noto Sans)

Załaduj czcionkę internetową w czasie działania i zastosuj ją za pomocą kontenera. Ten przykład ładuje Noto Sans z Google Fonts:

import { useState, useEffect } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";

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

  useEffect(() => {
    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={{ fontFamily: '"Noto Sans", sans-serif' }}>
      <DatePicker value={value} onChange={setValue} inline />
    </div>
  );
}

March 2026

💡 Zastosowanie produkcyjne

W prawdziwym projekcie załaduj czcionkę za pomocą tagu <link> w sekcji <head> twojego HTML lub poprzez bundler CSS, zamiast wstrzykiwać ją w czasie działania. Podejście z useEffect jest tu użyte tylko w celach demonstracyjnych.

Galeria czcionek internetowych

Porównaj różne czcionki internetowe, aby zobaczyć, jak radykalnie typografia zmienia wygląd pickera. Wszystkie poniższe czcionki obsługują renderowanie wielojęzyczne (łacina, CJK, koreański).

import { useState, useEffect } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";

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={{ fontFamily: WEB_FONTS[active].family }}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026