Styled Components
Styled Components Nedir?, Styled Components Oluşturma, Biz Neden Tercih Ettik?
Styled Components Nedir?
Styled Components bizi uzun ve gittikçe karışan CSS kodlarından kurtaran, HTML elementlerini fonksiyonel stillendirmemizi sağlayan ve en önemlisi içerisinde JavaScript kodları kullanmamızı sağlayan bir teknolojidir. Geleneksel stil yazma metodunun dışına çıkarak, temasal ve işlevsel stil bileşenleri (components) oluşturmamızı sağlar.
Styled Components Oluşturma
Bileşen oluşturmak çok basittir. Önce Styled Components’i yüklememiz gerekiyor. Aşağıdaki şekilde yüklüyoruz.
1 | npm install styled-components@beta |
Ardından bir stilli bileşen oluşturmak aşağıdaki kod parçası kadar kolay.
1 | import stil from 'styled-components'; |
Bu şekilde Title adında kırmızı bir h1 bileşeni oluşturmuş olduk.
JavaScript kodlarını aşağıdaki gibi kolaylıkla CSS içine ekleyebiliyoruz.
1 | const Button = stil.button` |
Bu şekilde Props’lara bağlı dinamik bir bileşen yapısını CSS içinde oluşturmuş olduk.
Biz Neden Styled-Components Kullanmayı Tercih Ettik?
Cevabı çok basit; kolaylık ve rahatlık. CSS içerisinde JavaScript kodu yazabilmemiz ve server-side rendering özelliğini desteklemesi nedeniyle, bu yöntemi projemizde kullanmayı tercih ediyoruz. Styled-Components, stylesheet rehydration ile eşzamanlı server-side rendering’i destekler. Aşağıdaki kıyaslama görseli de seçimimizin ne kadar doğru olduğunu kanıtlar niteliktedir.
Kaynaklar : styled-components