React Bileşenlerini Stilleme: CSS, Inline Stiller ve CSS-in-JS (JSS)

React projelerinde stiller, sadece görsel değil, kod mimarisi açısından da büyük önem taşır.
Bu rehberde üç farklı yöntemi öğreneceksiniz:

• 🎨 Düz CSS (klasik yöntem)
• ⚙️ Inline Stiller (JavaScript nesneleriyle dinamik yapı)
• ⚡ JSS (CSS-in-JS) (modern, izole ve ölçeklenebilir yaklaşım)

Her yöntemi, bir Uyarı (Alert) bileşeni üzerinden adım adım uygulayacağız.

---

🧠 Ne Öğreneceksiniz?

• React bileşenlerini farklı stillendirme yöntemleriyle tanımak
• Stil çakışmalarını (name conflicts) önlemek
• Dinamik ve prop-tabanlı renk / kenarlık atamaları yapmak
• CSS-in-JS ile benzersiz sınıf adları üretmek

---

🧱 1. Proje Kurulumu ve Dosya Yapısı

Öncelikle boş bir React projesi oluşturun:

npx create-react-app rabisu-stil-rehberi
cd rabisu-stil-rehberi

Temiz bir başlangıç için gereksiz dosyaları silin:

rm src/logo.svg src/App.test.js src/index.css

src/App.js dosyasını sadeleştirin:

import React from 'react';
import './App.css';

function App() {
  return <></>;
}

export default App;

Ardından bileşenleri düzenli bir klasör yapısına alın:

mkdir src/components
mkdir src/components/App
mv src/App.* src/components/App

index.js dosyasındaki yolu güncelleyin:

import App from './components/App/App';

---

🎨 2. Düz CSS ile Stilleme

Klasik ama hâlâ güçlü bir yöntemdir. Yeni bir bileşen oluşturalım:

mkdir src/components/Uyari

Uyari.js

import React from 'react';
import PropTypes from 'prop-types';
import './Uyari.css';

export default function Uyari({ children, title, type }) {
  return (
    <div className={`uyari-cerceve ${type}`}>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

Uyari.propTypes = {
  title: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};

Uyari.css

.uyari-cerceve {
  padding: 15px;
  margin-bottom: 15px;
}

.uyari-cerceve > h2 {
  margin: 0 0 10px 0;
}

.uyari-cerceve.hata {
  border: 1px solid #f56260;
}

.hata > h2 {
  color: #f56260;
}

.uyari-cerceve.basarili {
  border: 1px solid #6da06f;
}

.basarili > h2 {
  color: #6da06f;
}

💡 .uyari-cerceve > h2 kullanımı, sadece doğrudan çocuk öğeleri hedef alır ve stil çakışmalarını engeller.

---

⚙️ 3. Inline Stiller (JavaScript Nesneleriyle)

Bu yöntemle tüm stilleri doğrudan bileşen içinde tanımlayabilirsiniz. Her şey JavaScript nesneleriyle kontrol edilir — CSS çakışması imkânsız hale gelir.

Uyari.js

import React from 'react';
import PropTypes from 'prop-types';

export default function Uyari({ children, type, title }) {
  const renkler = {
    basarili: '#6da06f',
    hata: '#f56260',
  };

  const stiller = {
    cerceve: {
      border: `1px solid ${renkler[type]}`,
      padding: 15,
      marginBottom: 15,
    },
    baslik: {
      color: renkler[type],
      margin: '0 0 10px 0',
    },
  };

  return (
    <div style={stiller.cerceve}>
      <h2 style={stiller.baslik}>{title}</h2>
      {children}
    </div>
  );
}

Inline stiller ile JavaScript değişkenleri doğrudan CSS değerlerine dönüştürülür. Ancak :hover veya @media gibi kurallar desteklenmez.

---

⚡ 4. CSS-in-JS (JSS) ile Modern Stilleme

JSS, dinamik stilleri izole bir şekilde oluşturur ve benzersiz sınıf adları üretir.

Kurulum:

npm install react-jss

Uyari.js

import React from 'react';
import PropTypes from 'prop-types';
import { createUseStyles } from 'react-jss';

const renkler = {
  basarili: '#6da06f',
  hata: '#f56260',
};

const useStyles = createUseStyles({
  cerceve: ({ type }) => ({
    border: `1px solid ${renkler[type]}`,
    padding: 15,
    marginBottom: 15,
  }),
  baslik: ({ type }) => ({
    color: renkler[type],
    margin: [0, 0, 10, 0],
  }),
});

export default function Uyari({ children, type, title }) {
  const siniflar = useStyles({ type });

  return (
    <div className={siniflar.cerceve}>
      <h2 className={siniflar.baslik}>{title}</h2>
      {children}
    </div>
  );
}

useStyles({ type }) çağrısı, bileşene özel benzersiz sınıf adları üretir (örneğin: .cerceve-jss-23a5). Bu, stil çakışması riskini tamamen ortadan kaldırır.

---

💬 Sıkça Sorulan Sorular (SSS)

1. Hangi yöntem daha iyi?

Düz CSS → Küçük projelerde hızlıdır.

Inline Stil → Çakışmasız ama sınırlı.

JSS → Büyük projelerde modern, ölçeklenebilir ve prop-tabanlıdır.

2. camelCase neden gerekli?

JavaScript nesnelerinde margin-bottom gibi tireli anahtar isimleri geçerli değildir. Bu yüzden marginBottom yazılır.

3. JSS stil çakışmalarını nasıl önler?

Oluşturulan her sınıfa benzersiz bir hash ekler (örneğin baslik-jss-a2b7), bu sayede diğer CSS kurallarıyla karışmaz.

4. Inline stillerde px dönüşümü nasıl çalışır?

Sayısal değerler (padding: 20) otomatik olarak px olur. Ancak yüzde, em veya rem gibi birimler için string kullanmanız gerekir ("20%" gibi).

5. Performans farkı var mı?

Evet. CSS dosyaları tarayıcı cache’iyle daha hızlıdır. JSS daha dinamik ama biraz daha fazla runtime yükü getirir.

---

🚀 Sonuç

React projelerinde stil yönetimi, büyüklüğe ve esnekliğe göre değişir:

Yöntem	Avantaj	Dezavantaj
CSS	Hızlı ve sade	Çakışma riski
Inline	Çakışmasız	Sınırlı özellik desteği
JSS	Dinamik ve modüler	Az da olsa runtime maliyeti

💡 Büyük ölçekli projelerde JSS veya Styled Components tercih edilir. Küçük ve basit uygulamalarda ise klasik CSS hâlâ güçlü bir seçenektir.

React projelerinizi Rabisu Bulut üzerinde barındırarak yüksek performanslı bir stil geliştirme ortamına geçin.