Kiểu chữ

Gói styled sử dụng system font stack theo mặc định:

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

Điều này sẽ hiển thị bằng phông chữ gốc của hệ điều hành trên mỗi nền tảng (San Francisco trên macOS, Segoe UI trên Windows, Roboto trên Android). Phông chữ hệ thống cung cấp hỗ trợ đa ngôn ngữ tốt vì hệ điều hành tự động xử lý các phông chữ thay thế cho CJK, tiếng Ả Rập và các tập lệnh khác.

Để ghi đè, hãy đặt --rdrp-font-family trên bất kỳ phần tử cha nào — nó sẽ được kế thừa vào bộ chọn.

Kiểu nội tuyến biến CSS

Ghi đè phông chữ thông qua thuộc tính style trên một phần tử bao bọc:

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

Họ phông chữ

Chuyển đổi giữa các họ phông chữ bằng cách đặt --rdrp-font-family trên một trình bao bọc:

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
Su
Mo
Tu
We
Th
Fr
Sa

Sử dụng Phông chữ Web (Noto Sans)

Để hiển thị nhất quán trên nhiều nền tảng hoặc các dự án i18n, hãy tải một phông chữ web như Noto Sans và ghi đè biến:

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


// 1. Tải Noto Sans trong HTML hoặc CSS của bạn:
//    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">


// 2. Ghi đè biến phông chữ:
<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
Su
Mo
Tu
We
Th
Fr
Sa

Thư viện phông chữ web

So sánh các phông chữ web khác nhau để xem kiểu chữ thay đổi giao diện của bộ chọn một cách đáng kể như thế nào. Tất cả các phông chữ bên dưới đều hỗ trợ hiển thị đa ngôn ngữ (Latin, CJK, tiếng Hàn).

⚠️ Chỉ demo

Các phông chữ bên dưới được tải từ Google Fonts CDN cho mục đích trình diễn. Thư viện này không đi kèm với bất kỳ phông chữ web nào — bạn cần tự tải chúng trong dự án của mình.

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
Su
Mo
Tu
We
Th
Fr
Sa

Kích thước & Độ đậm của phông chữ

Tinh chỉnh mật độ kiểu chữ bằng cách ghi đè các biến kích thước và độ đậm:

BiếnMặc địnhMô tả
--rdrp-font-size-xs11pxVăn bản nhỏ nhất
--rdrp-font-size-sm12pxNhãn ngày trong tuần
--rdrp-font-size-base13pxÔ ngày, các nút
--rdrp-font-size-md14pxKích hoạt, mục thời gian
--rdrp-font-size-lg15pxTiêu đề tháng
--rdrp-font-weight-normal400Độ đậm cơ bản
--rdrp-font-weight-medium500Nhấn mạnh trung bình
--rdrp-font-weight-semibold600Ngày đã chọn, tiêu đề
--rdrp-font-weight-bold700Chỉ báo hôm nay
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
Su
Mo
Tu
We
Th
Fr
Sa