Styled Components ile React'ta Stilleme
Önceki derslerde, global CSS ve inline stil kullanımını ele aldık. Bu derste, daha büyük uygulamalar için daha etkili bir yöntem olan styled-components kütüphanesini kullanacağız.
Şimdi, önceki derslerde kullandığımız CSS stilleri olmayan bileşenimizi alalım:
function App() {
return (
<div>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
);
}
Öncelikle Styled Components
kütüphanesini kuralım:
npm install --save styled-components
Ardından, App bileşenine gerekli
paketi içe aktaralım:
import styled from 'styled-components';
Artık etiketleri stillere sarabilir ve bunları doğrudan JS içine yerleştirilmiş stillerle React bileşenleri olarak kullanabiliriz. Bu yaklaşıma CSS in JS da denir.
İlk paragrafı stilleyelim. Bunun için,
App fonksiyonundan önce, içe aktarma
satırlarından sonra, Text1 bileşenini
oluşturalım. Kütüphanedeki styled
nesnesinden bir paragrafa ihtiyacımız var,
bu yüzden styled.p yazıyoruz. Ardından,
şablon dizesi içinde, normal CSS'de olduğu
gibi, ihtiyacımız olan CSS stillerini
listeliyoruz:
const Text1 = styled.p`
color: orangered;
font-weight: bold;
`;
Gördüğünüz gibi, burada şablon dizeleri şeklinde saf CSS kullanıyoruz, bu da çok kullanışlıdır. Benzer şekilde, medya sorgularını, sözde öğeleri, seçicileri ve diğer CSS işlevlerini kullanabiliriz.
Şimdi, App bileşen fonksiyonunun
içinde, p etiketini, oluşturduğumuz
Text1 bileşeni ile değiştirelim:
<Text1>text</Text1>
Benzer şekilde, ikinci ve üçüncü
paragrafları stilleyelim. Bunun için
Text2 ve Text3 bileşenlerini
oluşturalım:
const Text2 = styled.p`
font-style: italic;
color: brown;
`;
const Text3 = styled.p`
background-color: orange;
font-weight: bold;
color: white;
`;
Son olarak, div'imizi stilleyelim.
Bunun için bir bileşen oluşturalım ve
adını Container koyalım:
const Container = styled.div`
width: 200px;
border: 2px solid brown;
padding: 10px;
text-align: center;
`;
Tüm etiketlerimizi oluşturulan bileşenlerle değiştirelim:
import styled from "styled-components";
const Container = styled.div`
width: 200px;
border: 2px solid brown;
padding: 10px;
text-align: center;
`;
const Text1 = styled.p`
color: orangered;
font-weight: bold;
`;
const Text2 = styled.p`
font-style: italic;
color: brown;
`;
const Text3 = styled.p`
background-color: orange;
font-weight: bold;
color: white;
`;
function App() {
return (
<Container>
<Text1>text</Text1>
<Text2>text</Text2>
<Text3>text</Text3>
</Container>
);
}
Bu yaklaşım sayesinde, stilleri olan tekrar kullanılabilir bileşenler oluşturulabilir.
Oluşturulan HTML'i tarayıcıdaki geliştirici paneline açarsanız, her bileşenin kendi benzersiz sınıflarına sahip olduğunu göreceksiniz. Böylece, artık ayrı bileşenlerin sınıfları arasındaki çakışmalar konusunda endişelenmemize gerek kalmaz.
Benzer şekilde, örneğin Emotion kütüphanesini kullanarak da bileşenler stilenebilir.
Bir önceki dersteki alıştırmada yaptığınız React bileşenini alın ve Styled Components kütüphanesini kullanarak stilleyin.