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:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Öncelikle Styled Components kütüphanesini kuralım:

terminalnpm install --save styled-components

Ardından, App bileşenine gerekli paketi içe aktaralım:

App.jsimport 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:

App.jsconst 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:

App.js<Text1>text</Text1>     

Benzer şekilde, ikinci ve üçüncü paragrafları stilleyelim. Bunun için Text2 ve Text3 bileşenlerini oluşturalım:

App.jsconst 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:

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

Tüm etiketlerimizi oluşturulan bileşenlerle değiştirelim:

Calculator.jsimport 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.