React CSS: className, Inline Stil, CSS Modules, Tailwind

React bileşenleri sıradan CSS ile stillendirilir. Öğelere className prop'u ile bir sınıf ver ve kuralları bir stil dosyasına yaz, JavaScript'ten gelen değerler için style prop'unu kullan, proje büyüdüğünde CSS Modules'a ya da Tailwind'e başvur. Aşağıdaki örnek bu sayfada çalışabilmesi için CSS'ini bir <style> öğesinde tanımlıyor; bir projede bir .css dosyasında dururdu.

export default function App() {
    return (
        <div>
            <style>{`
                .card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; max-width: 280px; }
                .card-title { margin: 0 0 8px; font-size: 18px; }
                .btn { background: #2563eb; color: white; border: 0; border-radius: 6px; padding: 8px 14px; }
            `}</style>
            <div className="card">
                <h3 className="card-title">Pro plan</h3>
                <p>Unlimited lessons and projects.</p>
                <button className="btn">Upgrade</button>
            </div>
        </div>
    );
}

.btn kuralında #2563eb'yi #16a34a yap; düğme yeşile döner. CSS hakkında bildiğin her şey geçerlidir: seçiciler, media query'ler, hover durumları, animasyonlar.

class değil, className

JSX, class'ın ayrılmış bir sözcük olduğu JavaScript'e derlenir, bu yüzden React className'i kullanır; bu, DOM'un o özellik için kendi kullandığı addır (element.className). Tarayıcı yine sıradan bir class özelliği alır. Aynı yeniden adlandırma etiketlerde for yerine htmlFor için de geçerlidir. React 19 geliştirmede bir uyarıyla class'ı kabul eder, ama doğru ad ve her kod tabanının kullandığı ad className'dir.

className bir metin alır, bu yüzden birden çok sınıf boşlukla ayrılır: className="btn btn-primary". Değer JavaScript olduğu için hesaplanabilir.

Koşullu sınıflar

Bir sınıfı yalnızca bazı durumlarda eklemek için metni bir ternary ya da bir template literal ile oluştur. Seçili sekmeyi vurgulayan bir sekme çubuğu klasik örnektir.

import { useState } from 'react';

const TABS = ['Overview', 'Lessons', 'Reviews'];

export default function App() {
    const [active, setActive] = useState('Overview');

    return (
        <div>
            <style>{`
                .tab { border: 0; background: none; padding: 8px 12px; border-bottom: 2px solid transparent; }
                .tab.active { border-bottom-color: #2563eb; color: #2563eb; font-weight: 600; }
                .tab.disabled { color: #aaa; }
            `}</style>
            {TABS.map((tab) => (
                <button
                    key={tab}
                    className={`tab ${tab === active ? 'active' : ''} ${tab === 'Reviews' ? 'disabled' : ''}`}
                    disabled={tab === 'Reviews'}
                    onClick={() => setActive(tab)}
                >
                    {tab}
                </button>
            ))}
            <p>Showing: {active}</p>
        </div>
    );
}

Lessons'a tıkla; alt çizgi yer değiştirir, çünkü artık yalnızca o düğmenin metni active içerir. Reviews, disabled sınıfını ve disabled özelliğini alır, bu yüzden gridir ve tıklamaları yok sayar. Template literal bir koşul false olduğunda fazladan boşluklar bırakır; tarayıcılar bunları yok sayar. Bir bileşenin birçok koşullu sınıfı olduğunda bir dizi daha derli topludur:

const classes = ['tab', isActive && 'active', isDisabled && 'disabled']
    .filter(Boolean)
    .join(' ');

Birçok proje aynı iş için minik clsx paketini kullanır: clsx('tab', { active: isActive, disabled: isDisabled }).

style prop'u

style prop'u bir metin değil, bir JavaScript nesnesi alır. Çift süslü parantezin nedeni budur: dıştaki çift bir JavaScript ifadesi açar, içteki çift nesne literal'idir. Özellik adları camelCase'dir (backgroundColor, fontSize, borderRadius) ve değerler metin ya da sayıdır. Bir uzunluk özelliğindeki sayı piksele dönüşür, yani padding: 12, 12px demektir.

Inline stiller bir değer render anında hesaplandığında parlar, örneğin bir ilerleme çubuğunun genişliği.

import { useState } from 'react';

export default function App() {
    const [percent, setPercent] = useState(30);
    const done = percent >= 100;

    return (
        <div style={{ maxWidth: 320 }}>
            <div style={{ height: 12, background: '#e5e7eb', borderRadius: 6, overflow: 'hidden' }}>
                <div
                    style={{
                        width: percent + '%',
                        height: '100%',
                        backgroundColor: done ? '#16a34a' : '#2563eb',
                        transition: 'width 0.3s',
                    }}
                />
            </div>
            <p style={{ fontSize: 14, opacity: 0.8 }}>{percent}% complete</p>
            <button onClick={() => setPercent(Math.min(100, percent + 10))}>Add 10%</button>{' '}
            <button onClick={() => setPercent(0)}>Reset</button>
        </div>
    );
}

Çubuk dolana kadar Add 10%'a tıkla; çubuk yeşile döner. width: percent + '%' ifadesine dikkat et: çıplak bir sayı piksel anlamına gelirdi, bu yüzden px dışındaki birimler bir metne yazılır. Birimi olmayan özellikler düz sayı olarak kalır: opacity: 0.8, zIndex: 2, flexGrow: 1 ve lineHeight: 1.5 (bu bir çarpandır, piksel değil).

Inline stillerin sınırları vardır. :hover, :focus, media query'leri ya da keyframe animasyonlarını ifade edemezler ve her öğe kuralların kendi kopyasını taşır. Onları dinamik değerler için kullan, gerisini CSS'te tut.

Props'tan CSS değişkenleri

İyi bir orta yol, style içinde bir CSS özel özelliği (custom property) ayarlayıp onu stil dosyandan kullanmaktır. Kurallar, hover durumları dahil, CSS'te kalır; yalnızca değer JavaScript'ten gelir.

import { useState } from 'react';

export default function App() {
    const [accent, setAccent] = useState('#2563eb');

    return (
        <div style={{ '--accent': accent }}>
            <style>{`
                .pill { border: 2px solid var(--accent); color: var(--accent); background: none;
                        border-radius: 999px; padding: 6px 14px; }
                .pill:hover { background: var(--accent); color: white; }
            `}</style>
            <label>
                Accent color <input type="color" value={accent} onChange={(e) => setAccent(e.target.value)} />
            </label>
            <p>
                <button className="pill">Follow</button> <button className="pill">Share</button>
            </p>
        </div>
    );
}

Yeni bir renk seç; iki düğme de onu takip eder ve hover dolgusu düz CSS olduğu için hâlâ çalışır. Özel özellik adları style nesnesinde tirelerini korur, bu yüzden tırnak içine yazılır: { '--accent': accent }.

CSS dosyaları

Gerçek bir projede stilleri .css dosyalarına yazar ve onlara ihtiyaç duyan bileşenden import edersin. Vite ile import yeterlidir: derleme aracı import './Button.css' ifadesini görür, geliştirme sırasında stil dosyasını sayfaya ekler ve production için bir CSS dosyasında paketler. Kullanılacak bir export yoktur; import yalnızca yan etkisi için vardır.

// Button.jsx
import './Button.css';

export default function Button({ children }) {
    return <button className="button">{children}</button>;
}

/* Button.css */
.button {
    background: #2563eb;
    color: white;
    border-radius: 6px;
}

Püf noktası, import edilen her stil dosyasının global olmasıdır. Button.css içindeki bir .button kuralı uygulamanın her yerinde o sınıfa sahip her öğeyi stillendirir ve ikisi de .title tanımlayan iki dosya birbirinin üzerine yazar. Ekipler bunu BEM (.card__title) gibi adlandırma kurallarıyla ya da CSS Modules ile çözer.

CSS Modules

.module.css ile biten bir dosya bir CSS Module'dür. Onu import etmek, yazdığın her sınıf adını benzersiz bir üretilmiş ada eşleyen bir nesne verir, böylece bir sınıf yalnızca onu kullandığın yerde uygulanabilir. Vite ve Next.js bunu hiçbir kurulum olmadan destekler.

// Card.jsx
import styles from './Card.module.css';

export default function Card({ title, children, featured }) {
    return (
        <section className={featured ? `${styles.card} ${styles.featured}` : styles.card}>
            <h3 className={styles.title}>{title}</h3>
            {children}
        </section>
    );
}

/* Card.module.css */
.card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; }
.featured { border-color: #2563eb; }
.title { margin: 0; }

Tarayıcıda sınıf _card_1x2ab_1 gibi bir şey olarak çıkar. Başka bir bileşen kendi .title'ını tanımlayabilir ve ikisi asla çakışmaz. Hover kuralları ve media query'ler dahil normal CSS yazarsın; CSS Modules'un bileşen stilleri için yaygın bir varsayılan olmasının nedeni budur.

React ile Tailwind CSS

Tailwind farklı bir yaklaşım izler: kural yazmak yerine küçük yardımcı sınıfları doğrudan className içinde birleştirirsin. px-4 yatay padding'i ayarlar, rounded-lg köşeleri yuvarlar, hover:bg-blue-700 hover'da arka planı değiştirir. Tailwind dosyalarını tarar ve yalnızca kullandığın sınıflar için CSS üretir.

Bir Vite React uygulamasında (Tailwind v4) kurulum üç adımdır:

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [react(), tailwindcss()],
});

/* src/index.css, imported from main.jsx */
@import "tailwindcss";

Ardından bileşenleri sınıflarla stillendir:

function UpgradeCard({ active }) {
    return (
        <div className="max-w-xs rounded-xl border border-gray-200 p-4">
            <h3 className="mb-2 text-lg font-semibold">Pro plan</h3>
            <button
                className={`rounded-md px-4 py-2 text-white ${active ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'}`}
            >
                {active ? 'Active' : 'Upgrade'}
            </button>
        </div>
    );
}

Tailwind bu sayfadaki editörlerde mevcut değil, bu yüzden statik kod olarak gösteriliyor. Koşullu sınıflar yukarıdaki sekme örneğindekiyle tamamen aynı çalışır, ama her sınıf adını tam yaz: Tailwind sınıfları kaynak metnini tarayarak bulur, bu yüzden `bg-${color}-600` gibi çalışma anında birleştirilen bir ad asla üretilmez.

Hangisi ne zaman kullanılmalı

• Düz CSS dosyaları küçük uygulamalara ve global stillere (sıfırlamalar, fontlar, sayfa yerleşimi) uyar. Uygulama büyüdükçe sınıf adı çakışmalarına dikkat et.
• CSS Modules çoğu bileşen stiline uyar: normal CSS, otomatik kapsamlı, ek kütüphane yok.
• Tailwind, stillendirmeyi işaretlemede yapmayı tercih eden ve boşluk ile renk için ortak bir tasarım ölçeği isteyen ekiplere uyar.
• style prop'u render anında hesaplanan değerler içindir: bir genişlik, bir konum, kullanıcının seçtiği bir renk. Hover ve media kurallarını CSS'te tutmak için onu CSS değişkenleriyle eşleştir.

Bunları karıştırabilirsin. Tipik bir uygulamada bir global stil dosyası, bileşenler için CSS Modules ya da Tailwind ve dinamik değerler için birkaç inline stil bulunur. styled-components ve Emotion gibi CSS-in-JS kütüphaneleri, eski kod tabanlarında karşılaşacağın başka bir seçenektir. React kurulumu sayfası bunların hepsinin çalıştığı bir Vite projesini nasıl başlatacağını gösteriyor.