Tipografi

styled paketi varsayılan olarak bir sistem yazı tipi yığını kullanır:

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

Bu, her platformda işletim sisteminin yerel yazı tipiyle oluşturulur (macOS’te San Francisco, Windows’ta Segoe UI, Android’de Roboto). İşletim sistemi CJK, Arapça ve diğer alfabe fallbacks’lerini otomatik olarak yönettiği için sistem yazı tipleri iyi çoklu dil desteği sağlar.

Geçersiz kılmak için, herhangi bir üst öğede --rdrp-font-family değişkenini ayarlayın — bu, seçiciye basamaklanır.

CSS Değişkeni Satır İçi Stil

Bir sarmalayıcı öğe üzerindeki style özelliği aracılığıyla yazı tipini geçersiz kılın:

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

Yazı Tipi Ailesi

Bir sarmalayıcıda --rdrp-font-family değişkenini ayarlayarak yazı tipi aileleri arasında geçiş yapın:

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

Web Yazı Tiplerini Kullanma (Noto Sans)

Tutarlı platformlar arası oluşturma veya i18n projeleri için, Noto Sans gibi bir web yazı tipi yükleyin ve değişkeni geçersiz kılın:

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

// 1. Noto Sans'ı HTML veya CSS'inize yükleyin:
//    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

// 2. Yazı tipi değişkenini geçersiz kılın:
<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

Web Yazı Tipi Galerisi

Farklı web yazı tiplerini karşılaştırarak tipografinin seçicinin görünümünü ne kadar dramatik bir şekilde değiştirdiğini görün. Aşağıdaki tüm yazı tipleri çoklu dil oluşturmayı destekler (Latin, CJK, Korece).

⚠️ Sadece demo

Aşağıdaki yazı tipleri gösterim amacıyla Google Fonts CDN’den yüklenmiştir. Bu kütüphane herhangi bir web yazı tipi içermez — bunları kendi projenizde yüklemeniz gerekir.

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

Yazı Tipi Boyutu ve Kalınlığı

Boyut ve kalınlık değişkenlerini geçersiz kılarak tipografi yoğunluğunu hassas bir şekilde ayarlayın:

Değişken	Varsayılan	Açıklama
`--rdrp-font-size-xs`	`11px`	En küçük metin
`--rdrp-font-size-sm`	`12px`	Hafta günü etiketleri
`--rdrp-font-size-base`	`13px`	Gün hücreleri, düğmeler
`--rdrp-font-size-md`	`14px`	Tetikleyici, zaman öğeleri
`--rdrp-font-size-lg`	`15px`	Ay başlığı
`--rdrp-font-weight-normal`	`400`	Temel kalınlık
`--rdrp-font-weight-medium`	`500`	Orta vurgu
`--rdrp-font-weight-semibold`	`600`	Seçili günler, başlıklar
`--rdrp-font-weight-bold`	`700`	Bugün göstergesi

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