React bileşenlerinin Emotion ile biçimlendirilmesi

React-Komponentenın stilini modern ve güçlü bir şekilde yönetmek istiyor musun? Emotion kütüphanesi ile CSS'i direkt React komponentlerine entegre edebilir ve kullanıcı arayüzünü etkili bir şekilde tasarlayabilirsin. Bu kılavuzda sana Emotion ile stillemenin temellerini anlatacağım, kütüphaneyi nasıl kuracağını ve kullanacağını, ayrıca bazı faydalı ipuçları vereceğim.

Önemli Bulgular

• Emotion, CSS'in JavaScript içinde yazılmasını sağlar ve sezgisel kullanım sunar.
• Emotion ile Template Literaller ve css-Props'ın kullanımı dahil olmak üzere farklı stil tekniklerinden yararlanabilirsiniz.
• Emotion'ın kullanımıyla stil yönetimi daha modüler hale gelir, bu da yeniden kullanılabilirlik ve okunabilirliği artırır.

Adım Adım Kılavuz

1. Emotion kurulumu

İlk önce projende Emotion'ı kurman gerekiyor. Terminali aç ve projenin dizinine git. Aşağıdaki komutu çalıştırarak emotion kütüphanesini kur:

npm install @emotion/react @emotion/styled

2. CSS import etme

App.jsx dosyan içinde Emotion'ı kullanabilirsin. css fonksiyonunu kullanmak için Emotion'ı import et ve styled elemanını import et. Dosyanın başına aşağıdakini ekle:

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

3. Template Literaller ile Stil verme

CSS değişkeni oluşturmak için Emotion'ın css fonksiyonunu kullanarak Template Literalleri kullan. Uygulaman için bir Wrapper sınıfı yazmak için aşağıdaki örneği incele:

const appStyle = css` display: flex; flex-direction: column; font-size: 16px;
`;

Bu kod, düzen düzenini sağlamak için flexbox'ın kullanımını engeller.

4. Stilin Uygulanması

Belirtilen stili uygulamak için, appStyle değişkenini ana HTML elementinin className niteliğine geçir. Aşağıdaki gibi görünmelidir:

function App() { return <div css={appStyle}>Merhaba Dünya!</div>;
}

5. Styled-Components Kullanımı

css değişkeninin kullanımının yanı sıra, Emotion ile Styled-Komponenleri de kullanabilirsin. Styled bir bileşen oluşturmak için aşağıdaki kodu kullanabilirsin:

const Container = styled.div` padding: 20px; background-color: lightblue;
`;

Bu, stil tanımlarına sahip yeni bir CSS tabanlı bileşen olan Container'a sahip olmanı sağlar.

6. Media Queries Eklemek

Emotion, CSS'e medya sorgularını entegre etmeyi kolaylaştırır. Tek yapman gereken bunları Template Literale eklemek:

const responsiveStyle = css` @media (max-width: 600px) { font-size: 14px; }
`;

Bu medya sorgusu, ekran genişliği 600 pikselden az olduğunda metin boyutunu değiştirir.

7. Hover-Efektleri Kullanımı

Aynı şekilde, CSS şablonlarında Hover-Efektlerini kolayca tanımlayabilirsin:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; }
`;

Bu CSS kuralı, fare ile üzerine gelindiğinde öğenin arka plan rengini değiştirir.

8. Daha Karmaşık Stillerin Birleştirilmesi

Emotion, birden fazla class adının birleştirilmesine izin verir. Bu, cx fonksiyonu ile mümkün olur:

import { css, cx } from '@emotion/react';

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

Bu durumda metin hem mavi hem de kırmızı olarak gösterilir.

9. Gelecek Genişlemeler

Gelecekte büyük bir proje yönetiyorsanız, stillerinizi farklı modüllerde düzenlemek faydalı olabilir. Örneğin commonStyles.js adında bir dosya oluşturup temel stillerinizi oraya çıkarabilirsiniz:

// commonStyles.js
export const flexCenter = css` display: flex; justify-content: center; align-items: center;
`;

Şimdi flexCenter'ı diğer bileşenlere ekleyebilirsiniz.

10. Testler ve Ayarlamalar

Uygulamanızı tarayıcıda yükleyin ve stillerin doğru görüntülendiğinden emin olun. Farklı stilleri deneyin ve sonucu canlı olarak izleyin.

Özet

Emotion ve React kombinasyonuyla gerçekçi UI düzenleri oluşturmak mümkün hale gelir. Emotion, CSS'yi doğrudan JavaScript'te tanımlamayı ve etkili bir şekilde yönetmeyi sağlar. Bu sayede ekran yoğunluğu avantajlarından ve mantık ile stil arasındaki sıkı entegrasyondan faydalanabilirsiniz.