Vite

npm create vite@latest my-app -- --template react-ts
cd my-app
npx @meridui/cli init

init, @meridui/react'i kurar, aşağıdaki stil import'unu ekler ve Merid'i ezecek şablon stillerini kaldırır (bir sonraki bölüm). Her değişikliği diff olarak gösterir ve önce sorar. Elle kurmak istersen npm i @meridui/react çalıştır ve sayfanın devamını izle.

Giriş dosyası

Merid'in stil dosyasını kendi CSS'inden önce import et.

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@meridui/react/styles.css";
import "./index.css";
import { App } from "./App";


createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Base layer dokümanın kendisine stil verir; mrd-root yalnızca, başka stilleri olan bir sayfanın içindeki bir alt ağaca bunu yeniden uygulamak için gerekir.

Şablonun index.css dosyası

Vite şablonundaki src/index.css, şablonun başlangıç sayfası için yazılmıştır. :root'ta sayfanın font'unu, boyutunu ve renklerini belirler, h1 ve h2'yi boyutlandırır, code'a stil verir, p { margin: 0 } ekler ve #root'u ortalanmış, 1126px genişliğinde, metni ortalı bir kolona çevirir. create-vite 9'dan önceki şablonlar ayrıca her button'a ve a'ya stil verir, body'yi de flexbox ile ortalar. Bu kurallar bir cascade layer'da olmadığı için Merid'inkileri ezer (bkz. Stil ve CSS layer'ları): başlıklar şablonun boyutlarını alır, eski şablonda primary buton gri bir arka planla görünür.

npx @meridui/cli init bu kuralları kaldırır ve çoğu uygulamanın zaten istediği body { margin: 0 }'ı bırakır:

/* init sonrası src/index.css */
body {
  margin: 0;
}

Yalnızca şablondaki haliyle duran kuralları kaldırır; değiştirdiğin ya da eklediğin her şey kalır. App.css'e, eski şablonun #root kuralı yoksa dokunmaz; geri kalanı yalnızca başlangıç sayfasının kendi sınıflarına stil verir. Elle temizlemek istersen aynı kuralları sil. Bu kurallardan biri kaldıkça npx @meridui/cli doctor uyarır.

Fontlar

Vite, Merid'in CSS'indeki url("../fonts/…")'u node_modules içinden çözer ve iki .woff2 dosyasını hash'li adlarla dist/assets'e kopyalar. Ayarlanacak bir şey yok. Kendi fontunu kullanmak için CSS'inde --mrd-font-sans'ı ayarla; paketteki font o zaman hiç istenmez.

Boyamadan önce dark mode

Sayfa hiçbir zaman yanlış temayla yanıp sönmesin diye index.html'e küçük bir inline script ekle:

<script>
  try {
    const t = localStorage.getItem("theme");
    if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
  } catch {}
</script>

Tema değiştirici için Dark mode stratejileri sayfasına bak.

Kütüphane modu

Vite'ın kütüphane moduyla Merid üzerine kendi component paketini yapıyorsan, @meridui/react, react ve react-dom'u build.rollupOptions.external içinde listele; böylece paketi kullananlar Merid'in context'inden ve stillerinden tek bir kopya alır.