CSS ile stil

className ile dış CSS dosyasından stil vermeyi öğrenirsin.

React'te en basit stil yöntemi className ile dış CSS dosyası kullanmaktır. JSX'te class değil className yazarsın.

Örnek: <button className="btn">Kaydet</button>. CSS dosyasında .btn { color: blue; } tanımı bu düğmeyi boyar.

CSS dosyasını JSX içine import edersin; Vite/Webpack otomatik yükler. Bu yöntem tanıdıktır ve büyük projelerde çalışır.

CSS dosyası import

CSS dosyasını bileşen dosyasının üstünde import edersin: import "./Button.css". Bundler bu dosyayı sayfaya otomatik ekler.

Bu yöntemde stiller genel (global) olur; iki bileşen aynı sınıf adını kullanırsa çakışır. Bu yüzden CSS Modules veya kapsamlı çözümler tercih edilir.

Şimdilik en basit yöntemi öğreniyoruz; ileride Modules gelecek.

Aşağıdaki iskeleti tamamla. SaveButton bileşeni yaz; <button className="btn">Kaydet</button> döndürsün. Dışa aktar.

Örnek çözümü göster

function SaveButton() {
  return <button className="btn">Kaydet</button>;
}

export default SaveButton;

CSS ile stil: eksik parçayı tamamla

<button className="____">Kaydet</button>

Cevabı göster

<button className="btn">Kaydet</button>

Sıradaki ders: CSS Modules