React Uygulamalarında Emotion CSS-in-JS Kütüphanesi Kullanımı

🎯 Bu Rehberde Ne Öğreneceksiniz?

Bu rehberde, React uygulamalarınızda güçlü bir CSS-in-JS çözümü olan Emotion kütüphanesini nasıl kullanacağınızı adım adım öğreneceksiniz.
Hem @emotion/react hem de @emotion/styled paketleriyle dinamik stiller, prop tabanlı temalar ve yeniden kullanılabilir bileşenler oluşturacağız.
Bu sayede koşullu stilleri, iç içe seçicileri ve tema değişkenlerini kolayca yönetebileceksiniz.

---

🧠 Teknik Özet

Kriter	Açıklama
Ana Teknik Konu	Emotion CSS-in-JS kütüphanesiyle React bileşenlerinde stil yönetimi
Hangi Problemi Çözüyor?	React’in temel style prop’u ile yapılamayan karmaşık, dinamik ve iç içe stilleri kolaylaştırır
Teknik Amaç	Kodunuzu daha modüler, yönetilebilir ve performanslı hale getirmek

---

⚙️ 1. Proje Kurulumu ve Emotion Paketlerinin Yüklenmesi

Öncelikle React projesini oluşturun ve gerekli Emotion bağımlılıklarını yükleyin.

npx create-react-app rabisu-emotion-stil
cd rabisu-emotion-stil
npm install @emotion/[email protected] @emotion/[email protected]

💡 Bu komutlar, Emotion’un React sürümü için gereken iki temel paketi yükler.

---

2. css Prop Kullanımı

Emotion, HTML elementlerine doğrudan stil vermek için css prop’unu sağlar. Hem nesne hem de template literal (şablon) biçiminde kullanılabilir.

src/App.js dosyasını açın:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function App() {
  return (
    <div>
      {/* Nesne şeklinde css kullanımı */}
      <div css={css({
        margin: 10,
        padding: 10,
        backgroundColor: '#eee',
      })}>
        Bu örnek `css` prop'unu nesneyle kullanır.
      </div>

      {/* Template literal ile css kullanımı */}
      <div css={css`
        margin: 10px;
        padding: 10px;
        background-color: #eee;
      `}>
        Bu örnek `css` prop'unu şablonla kullanır.
      </div>
    </div>
  );
}

export default App;

💬 /** @jsxImportSource @emotion/react */ ifadesi Babel’e Emotion ile JSX derlemesi yapılacağını söyler.

---

🧩 3. styled Bileşenleri Kullanımı

Daha gelişmiş ve tekrar kullanılabilir stiller için @emotion/styled paketini kullanabilirsiniz.

import styled from '@emotion/styled';

// bg ve fg prop'larıyla dinamik renk alan başlık bileşeni
const Baslik = styled('h1')`
  background-color: ${props => props.bg || '#333'};
  color: ${props => props.fg || '#fff'};
  padding: 10px;
  border-radius: 4px;
`;

function App() {
  return (
    <div>
      <Baslik bg="#008f68" fg="#fae042">
        Yeşil zemin, sarı metin.
      </Baslik>
      <Baslik>Varsayılan renklerle başlık</Baslik>
    </div>
  );
}

🪄 styled fonksiyonu, HTML etiketlerini React bileşenlerine dönüştürür ve props tabanlı stiller eklemenizi sağlar.

---

🔁 4. Bileşen Genişletme (withComponent)

Mevcut bir bileşeni farklı bir HTML etiketiyle yeniden kullanabilirsiniz.

// Baslik bileşeninin h2 olarak versiyonu
const AltBaslik = Baslik.withComponent('h2');

function App() {
  return (
    <div>
      <AltBaslik fg="#6db65b">
        H2 etiketi olarak render edilen alt başlık.
      </AltBaslik>
    </div>
  );
}

Bu yöntem, stil tekrarını önler ve tutarlı tasarım oluşturmanızı sağlar.

---

🧱 5. Varsayılan ve Gelişmiş Stiller

Emotion, birden fazla nesne birleştirerek varsayılan değerleri ezmenize izin verir.

// Varsayılan fontWeight 100, weight prop'u ile ezilebilir
const Kaynak = styled('cite')(
  { fontWeight: 100 },
  props => ({ fontWeight: props.weight })
);

// !important örneği
const AltBilgi = styled('footer')`
  border-top: 1px solid #ccc;
  margin-top: 40px !important;
  padding-top: 10px;
  color: #777;
`;

function App() {
  return (
    <>
      <Kaynak>Varsayılan metin</Kaynak>
      <Kaynak weight={700}>Kalın metin</Kaynak>
      <AltBilgi>Sayfa alt bilgisi</AltBilgi>
    </>
  );
}

⚠️ !important genelde önerilmez, ama özel durumlarda stil önceliği için kullanılabilir.

---

🧠 6. Tüm Yapının Birleştirilmiş Örneği

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const Baslik = styled('h1')`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
  padding: 15px;
  border-radius: 5px;
`;

const AltBaslik = Baslik.withComponent('h2');
const Alinti = styled('blockquote')(props => ({ fontSize: props.size, margin: '20px 0' }));
const Kaynak = styled('cite')({ fontWeight: 100 }, props => ({ fontWeight: props.weight }));
const AltYazi = styled('footer')`
  border-top: 1px solid #ccc;
  color: #888;
  margin-top: 40px !important;
  padding-top: 20px;
`;

function App() {
  return (
    <div css={css`background: #f4f4f4; padding: 20px;`}>
      <Baslik bg="#008f68" fg="#fae042">Gelişmiş Emotion Stilleri</Baslik>
      <AltBaslik fg="#3b82f6">Dinamik React Bileşenleri</AltBaslik>
      <Alinti size={26}>Bunu <code>@emotion/react</code> ile kodladım!</Alinti>
      <Kaynak weight={700}>Rabisu Ekibi</Kaynak>
      <AltYazi>Bulut Teknolojileri & Stil Yönetimi</AltYazi>
    </div>
  );
}

export default App;

🎨 Bu örnek css prop, styled bileşenleri, varsayılan değerleri ve genişletilmiş etiketleri bir arada gösterir.

---

💬 Sıkça Sorulan Sorular (SSS)

1. Emotion neden geleneksel CSS yerine tercih edilmeli?

Emotion, stilleri bileşenle birlikte tanımlar. Stil çakışmalarını önler, modüler yapıyı korur ve performans kazandırır.

2. Tema (Theming) desteği var mı?

Evet! ThemeProvider ve useTheme hook'u ile global temalar tanımlayabilir, renk paletlerini dinamikleştirebilirsiniz.

3. css prop ile styled farkı nedir?

css prop, hızlı prototipleme içindir; styled ise bileşen bazlı, kalıcı stil çözümleri sağlar.

4. !important kullanımı önerilir mi?

Zorunlu olmadıkça hayır. Ancak özel öncelikli durumlarda kullanılabilir.

5. SSR (Server-Side Rendering) ile uyumlu mu?

Evet. Emotion, Next.js gibi SSR yapılarıyla tamamen uyumludur.

---

🏁 Sonuç

Bu kılavuzda, Emotion kütüphanesinin React’te nasıl kullanılacağını, css prop ve styled bileşenleriyle modern, modüler ve performanslı stiller oluşturmayı öğrendiniz.

💡 Şimdi bu yapıyı Rabisu Bulut üzerindeki React projenizde deneyerek, uygulamalarınıza profesyonel bir görünüm kazandırabilirsiniz!