Esc

    ↑ ↓ ile gez, Enter ile aç

    EN

    MUI ve Merid: Material UI mı, Sade CSS Token'ları mı?

    MUI ve Merid: MUI X ile olgun bir Material Design paketi mi, sıkı token'lı küçük bir sade CSS kütüphanesi mi? Stil, tema, kapsam ve hangisi ne zaman.

    Ahmet Can Tiryaki2 dk okumaRead this in English

    Merid'i biz geliştiriyoruz. Bu sayfalar her kütüphaneyi kendi kullanıcılarının anlatacağı gibi anlatmaya çalışır ve dayandığı kaynakları verir. Yanlış ya da eskimiş bir bilgi görürsen issue aç, düzeltelim. Hata bildir

    MUI, React dünyasının en başarılı açık kaynak projelerinden biri: çok geniş bir component seti, arkasında bir şirket, MUI X data grid ve date picker'lar, on yılı aşkın production kullanımı. Merid ise 46 component'li, sabit bir tasarım sözleşmesi olan 0.1 sürümünde bir kütüphane. Aynı büyüklükte araçlar değiller; bu sayfa bunun nerede önemli olduğunu açıkça söylemeye çalışıyor.

    Merid'i biz geliştiriyoruz; buna göre değerlendir.

    Bir bakışta

    MUI (Material UI)Merid
    Paket@mui/material; grid, picker ve grafik için @mui/x-*@meridui/react
    StilVarsayılan olarak Emotion (runtime CSS-in-JS)Üç cascade layer'da tek sade CSS dosyası
    Varsayılan görünümMaterial DesignSade: ince çizgiler, tek accent, gri yüzeyler
    TemacreateTheme + ThemeProvider--mrd-* değişkenleri; herhangi bir alt ağaçta data-theme, data-accent, data-density
    Stil verme yollarısx, styled(), tema override'ları, className, propsCSS (senin kuralın kütüphane layer'larını ezer), token'lar, varyantlar
    Data grid, date pickerVar, MUI X ile (ücretsiz ve ücretli katmanlar)Yok; yalnızca gösterim için Table
    Server component'lerStilli component'ler client sınırı isterStatik parçalar sunucuda render olur; etkileşimli modüller "use client" ile gelir
    Olgunluk ve destekÇok yüksek; şirket destekli, ücretli destek var0.1, bağımsız geliştiriliyor
    LisansÇekirdek MIT; MUI X Pro/Premium ticariMIT

    Kaynaklar: MUI kurulum, MUI X, Merid README.

    MUI'ın açıkça önde olduğu yerler

    • Ağır component'ler. MUI X data grid, tarih ve saat seçiciler, grafikler ve tree view'in yerini doldurmak zor.
    • Kapsam. İhtiyacın olan hemen her widget zaten var.
    • Destek. Şirket, ücretli katmanlar ve öngörülebilir sürüm takvimi.
    • Bilinirlik. Çok sayıda geliştirici ve yapay zeka aracı MUI'ı iyi tanıyor.

    Merid'in farklı olduğu yerler

    Runtime stil yok. MUI'ın varsayılan kurulumu Emotion'ı getirir; stiller runtime'da üretilir ve React Server Components'te client sınırı gerekir. Merid statik CSS'tir: @meridui/react/styles.css'i bir kez import edersin.

    Tek stil yolu. Kütüphane kuralları @layer merid.* içinde durur; kendi CSS'in !important olmadan kazanır, değerler de tek seferlik sayılardan değil adlandırılmış token'lardan gelir.

    Provider olmadan tema. Açık bir uygulamada koyu bir sidebar tek bir attribute'tur: <aside data-theme="dark">.

    Merid'de olmayanlar

    Data grid, tarih/saat seçici, grafik ve combobox yok. 0.1 sürümünde; API 1.0'dan önce değişebilir ve tek bir geliştiricisi var. Bu component'lere ihtiyacın varsa Merid'i TanStack Table gibi ayrı bir grid ile eşleştir ya da MUI'da kal.

    Hangisini seçmeli?

    MUI'ı seç: MUI X'e, kurumsal desteğe ya da en geniş component setine ihtiyacın varsa.

    Merid'i seç: runtime'sız sade CSS, insanların ve yapay zeka ajanlarının kolayca sapamayacağı küçük bir API ve HTML attribute'larıyla kapsamlı tema istiyorsan; 46 component da yetiyorsa.

    İlgili: Material UI mı Ant Design mı? · shadcn/ui ve Merid