Kiểu chữ

Gói Tailwind v3 sử dụng lớp font-sans mặc định của Tailwind (ui-sans-serif, system-ui, sans-serif, ...). Vì font-family trong CSS được kế thừa, bạn có thể ghi đè phông chữ của bộ chọn bằng cách bọc nó trong một vùng chứa có kiểu fontFamily. Phông chữ của vùng chứa sẽ được áp dụng cho tất cả các phần tử của bộ chọn.

Họ phông chữ

Bọc bộ chọn và đặt fontFamily trên vùng chứa để chuyển đổi phông chữ:

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

const fonts: Record<string, string> = {
  system: "ui-sans-serif, system-ui, sans-serif",
  serif: "Georgia, 'Times New Roman', serif",
  mono: "'Courier New', Courier, monospace",
};

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

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        {Object.keys(fonts).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

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

Tải một phông chữ web trong lúc chạy và áp dụng nó thông qua một vùng chứa. Ví dụ này tải Noto Sans từ Google Fonts:

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

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

💡 Sử dụng trong Production

Trong một dự án thực tế, hãy tải phông chữ thông qua thẻ <link> trong <head> của HTML hoặc thông qua trình đóng gói CSS của bạn thay vì chèn nó vào lúc chạy. Cách tiếp cận useEffect ở đây chỉ nhằm mục đích minh họa.

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ữ dưới đây đều hỗ trợ hiển thị đa ngôn ngữ (Latin, CJK, tiếng Hàn).

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

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