styled-components Nedir ve Nasıl Kullanılır?

styled components, React componentlerini CSS ile şekillendirmek için kullanılan popüler bir kütüphanedir. Bu yazıda, bir React uygulamasında styled-components kütüphanesinin nasıl kullanılacağına bakacağız.

styled-components Nedir?

Söz konusu bir ReactJs uygulaması yazmak olunca kullanılacak bir sürü yöntem vardır.

Etiketlerin içine inline CSS yazmak, external CSS sayfası oluşturmak, styled components gibi bir çok sayabileceğimiz yöntemde vardır.

Peki styled components neden kullanırız? 

Component içinde tanımlanan her hangi bir elemente odaklanarak component içinde tanımlanan styled components ile tetiklenen tüm tanımlamalarını optimize eder.

styled-components KURULUM

# npm ile
npm install --save styled-components

# yarn ile 
yarn add styled-components

ve her zamanki gibi import edelim.

import React from “react”
import styled from “styled-components”

styled-components Faydaları Nelerdir?

Automatic critical CSS: Bir componet sayfasında hangi bileşenlerin oluşturulduğunu takip eder ve stillerini enjekte eder. Gereken en az miktarda kod yazıldığı anlamına gelir.

No class name bugs: styled components, stilleriniz için benzersiz sınıf adları oluşturur. Çakışma veya yazım hataları böyle söz konusu olmaz.

Easier deletion of CSS: Her stil parçası belirli bir componente bağlı olduğundan dolayı herhangi bir stil parçası silinirse, tüm tetiklenen elementler stilleri onunla birlikte silinecektir.

Simple dynamic styling: Düzinelerce sınıfı manuel olarak yönetmek zorunda kalmazsınız.

Painless maintenance: Bileşeninizi etkileyen stili bulmak için asla farklı dosyalar arasında arama yapmanız gerekmez. Kod tabanınız ne kadar büyük olursa olsun böylelikle bakım çocuk oyuncağıdır.

Automatic vendor prefixing: CSS’nizi istediğiniz gibi yazın ve gerisini stil bileşenlerinin halletmesine izin verin.

Artık kullanım şekillerini inceleyelim. styled-components componentlerinize stil vermek için etiketleri kullanır.

const Title = styled.h2`
  font-size:15px; 
  color: blue;
  text-align: center;
 
`;

const Wrapper = styled.section`
  background: green;
  padding: 60px; 
  margin: 5px; 
`;

render(
  <Wrapper>
    <Title>
      Hello World!:)
    </Title>
  </Wrapper>
);

Sürekli aynı butonlar elde etmek istemiyorsanız bunu özelleştirebilirsiniz.
Burada props yardımı ile butonlarımızı çeşitlendiriyoruz.

const Button = styled.button`
  background: ${props => props.second ? "pink" : "white"};
  color: ${props => props.primary ? "white" : "pink"};

  font-size: 15px;
  border-radius: 2px;
  margin: 15px;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 2px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button second>Second</Button>
  </div>
);

Tamamen farklı butonlar oluşturun.

const BlueButton = styled(Button)`
  color: blue;
  border-color: blue;
`;

render(
  <div>
    <BlueButton>Blue Button</BlueButton>
  </div>
);

Okuduğunuz için teşekkür ederim. Umarım ki yazım sizlere, React ile styled-components oluşturmaya başlamanızda yardımcı olur.
styled components tekrar etmeyen kod satırları, kullanım kolaylığı bakımından React projelerinizde tercih edebileceğiniz bir seçim.

Daha fazla bilgi için React’ın sayfasını ziyaret edebilirsiniz.

Diğer yazılarımıza buradan erişebilirsiniz.

Kodla Kalın. 🙂