Mucahid Yazar
mucahid.dev

mucahid.dev

Styled Components

Styled Components

Mucahid Yazar's photo
Mucahid Yazar
·Feb 12, 2021·

8 min read

Uzun zamandır acaba kullansam mı yoksa kullanmasam mı kararsızlığını yaşadığım bu Javascript kütüphanesini size anlatacağım.

Peki nedir Styled Components?

Kendi sitesinde yer alan tanımı olduğu gibi aşağıya bırakıyorum.

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles — using components as a low-level styling construct could not be easier!

Kısacası bize söylenen ve Javascriptin gücü ile css’i birleştirerek component yapısıyla kodlarımızı yazmaya yarayan css-in-js kütüphanesidir.

Kurulum

npm install — save styled-component

Basit Kullanım Örneği

  • Aşağıda basit bir kullanım örneği bırakıyorum size.
  • styled olarak ilk önce import ediyoruz, tabi siz isterseniz farklı bir isimlendirme ile de import edebilirsiniz. Yaygın olarak bu isimlendirme kullanılıyor.
  • Daha sonra bu import ettiğimiz isimle oluşturmak istediğimiz html elementini .button, .a, .ul gibi oluşturuyoruz ve içine normal css kodu yazar gibi yazıyoruz.

CSS VARIABLES

  • App.css diye bir dosya oluşturup App.js içine import edelim. Bu App.css içinde :root içinde pure css varible tanımlayabilir ve daha sonra tanımladığımız global css variableslarina styled-components’larımızın içinde de erişebilir ve kullanabiliriz.

App.css

App.js

JS VARIABLES

  • Yada istersek değişkenlere renk kodları veya string olarak css kodları vererek javascrip variablesları template literal ile kullanarak stillendirmelerimizi yapabiliriz aşağıda ki gibi.

Burada basit bir renk kodunu bir değişkene string olarak verip aşağıda styled-components’ım içinde kullanıyorum.

Burada ise daha fazlasını yaparak herhangi bir css kodunu string olarak değişkene veriyorum ve kullanıyorum.

PROPS

  • Styled-components’lar ile oluşturduğumuz componentslara verdiğimiz propsları, styled-components tanımları içerisinde yakalayabilir ve bu propslara göre stillendirmeler yapabiliriz. Açıkçası bu özellik benim için styled-components’ların en güçlü özelliği diyebilirim.

Burada styled-components ile oluşturduğum PropsButton component’ına color propsiu veriyorum. Daha sonra bu props’u styled-components tanımı içerisinde yukarıdaki şekildeki gibi yakalıyorum ve eğer color var ise verilen o color renk değeri olsun diyorum yoksa “black” olsun diyorum.

NESTING

  • scss kullanırken en sevdiğin özelliklerden birisi nesting yapısıydı. Yani iç içe parent/child şekliyle css kodlarımı yazabilmekti. Styled-components’larda da bu özellik aynı scss’lerde olduğu gibi mevcuttur.
  • Aşağıda ki örnekte göreceğiniz gibi .random class’ına sahip div’in içindeki child’ı .randomHeader’a ulaşmak için tek yapmamız gereken &Header demek. & işaret aslında bize onndan önceki ismi tamamlamasını sağlayan özel bir işarettir.

Gördüğünüz gibi StyledWrapper ile oluşturduğumuz section elementinin içerisinde ki h1'e, class’ı random olan div’e ve onun içindeki randomHeader’a nesting yapısıyla ulaşabiliyoruz.

EXTENDING

  • Sass’daki bir diğer en sevdiğim özellik olan extending’ler styled-components’larda da var ve kullanımı aşağıda ki gibi.

CancelButton‘u styled ile oluştururken argument olarak Button styled-components’ını verirsek, Button değişkeni CancelButton için bir extending css olur. Ve CancelButton, Button styled-components’ının csslerini kullanır ve CancelButton styled-components tanımı içinde ekstra css kodları varsa üzerine yazılır, overwrite edilir.

Başka bir örnek…

EXTENDING with className

  • Bazı durumlarda yukarıda ki gibi düz extending yapmak yerine aşağıdaki gibi className’lerle extending işlemlerini yaparız. Bu biraz karmaşık gelecek ama aşağıda ki açıklamamı tane tane okuyarak anlamaya çalışınız.

DobleFake’e styled. Yapip bir html elementi atamak yerine bir pure react component’ı olan Fake’yi atıyoruz. Fake Component’ını, styled ile DobleFake ile atadığımız için Fake bir className alıyor DoubleFake’den. Ve bu className DobleFake içinde tanımlanan css’lerin olduğu bir classNamedir aslında. (Tüm bu işlemler sonunda devtools’da React Componentslara baktığımızda, ana App componentımız içinde Fake adında bir Component gözükecektir.)

ATTRS (Attributes)

  • Html elementlerimizin aldığı type, placeholder gibi attributes’leri dynamic olarak veya static olarak styled-components’lar ilede ayarlayabiliriz.
  • Attributesleri kullanmak için tek yapmamız gereken styled. yaptıktan sonra oluşturacağımız html elementini belirledikten sonra .attrs yaparak, aşağıda ki gibi içinde bir obje return etmemizdir.

Burada static olarak attribute’leri ayarlıyorum. type her koşulda text, placeholder her koşulda “Enter Value”

Burada ise props.type var ise props.type olsun yoksa “number” olsun diyerek dynamic bir yapı elde ediyorum.

createGlobalStyle — GLOBAL STYLES

  • Styled-components içinden gelen createGlobalStyle metoduyla index.js veya App.js içinde tanımladığımız global style değerlerini component gibi oluşturup uygulamamıza aşağıda ki gibi dahil edip ekleyebiliriz.
  • Genel olarak uygulamamızı kaplayan index.js veya app.js component’ının en üst kısmına aşağıda ki gibi yerleştirmemiz en doğru kullanım oluyor.

MIXINs

  • Mixins nedir? Mixins’ler ile bir kod blogu tanımlarız, daha sonra bu kod blogunu farklı yerlerde kullanacağımız zaman sadece tek satırla halledebiliriz. Yani 1 kere 10larca 100lerce satırlık kodu yazıp tanımladıktan sonra, daha sonra tek satırla istediğimiz yere ekleyebilmemizi sağlayan yapılardır.
  • Aşağıda fixedTop adında bir değişkenle bir mixin oluşturuyorum. Daha sonra bu fixedTop mixinini CancelButton styled-components’ında kullanıyorum.

css(Helper Function)

  • styled-components’lardan gelen css helper function’u, bizim stringleri css’e çevirmemizi sağlarlar. Mixinsleri bunlarla tanımlamak her zaman daha mantıklıdır.

Peki aşağıdaki örnekte bize aslında aynı şeyi sağlarken, css helper functionunun bize sağladığı avantaj nedir?

  • css helper function’u tanımladığımız mixin’de function kullanacak olursak, veya props kullanacak olursak bunları tanımamızı sağlıyor. Eğer css kullanmazsak bunu başaramayız. Yukarıda ki css kullanmadığımız örnekte ki fixedTop’da aşağıda ki gibi props’a erişmeye kalksaydık calışmazdı, çünkü css olmadan bu işlemi tanıyamaz, anlayamaz.

Benim kişisel tavsiyem mixin tanımlarken css helper functionunu her zaman kullanın. Props kullanmaycaksanız bile. Çünkü belki ileride kullanabilirsiniz belli mi olur.

  • Benim kişisel tavsiyem mixin tanımlarken css helper functionunu her zaman kullanın. Props kullanmaycaksanız bile. Çünkü belki ileride kullanabilirsiniz belli mi olur.

Burada da bir başka mixin örneği bırakıyorum sizler için.

ANIMATIONs

  • Animationlarımızı da aşağıda ki gibi kurup ekleyebilir veya export edip kullanabiliriz. Normal css yazar gibi. Farklı hiç birşey yok.
  • Tabi isterseniz burada da Javascriptin gücünü kullanabilirsiniz.

MEDIA QUERIES

  • Media querylerimizi de istersek css yazar gibi tanımlarız. Ben size 3 farklı kullanım şekli örneği göstereceğim. Kullanım şekillerinizi belirlemek size kalmış. Benim tercihim son göstereceğim yöntem olan Master Way olurdu.

— Simple Way

— ADVANCED WAY

  • İstersek de aşağıda ki gibi bir fonksiyon tanımlayıp, o fonksiyona string değerlerini gönderip ve onun içinde de return ile media querylerimizi, fonksiyonun cağrıldığı styled-component’ın css alanına göndeririz. Bu çok güzel ve kullanışlı bir yöntemdir.

— MASTER WAY

  • İlk önce ‘size’ adın da bir değişken belirleyip hangi ‘size’ pointlerinin olacağını ‘key’ ve ‘value’ olarak belirleriz.

  • Daha sonra below ve above adın da bir object oluştururuz. Bu objeleri daha sonra below.medium, below.large, above.large gibi kullanabilmek için, ‘size’in keylerini array olarak döndürürüz, daha sonra bir reduce metodu ile media queryleri value olarak small, medium, large adın da keylere vererek döndeririz. Ve dönecek argumentleri css helper functionu ile stringe çeviririz.

  • Ve bundan sonra tek yapmamız gereken above.medium veya below.large gibi diyerek, media querylerimizi kullanmaktır.

  • Above üzerinde, below altında anlamın da olduğu için, above’da min-width, belowe’da max width kullandık. Above.medium derken aslinda medium 960px olduğu için 960px üzerinde demek istiyoruz. Yani 960px üzerinde içeridekileri uygula.

  • Yapımızın console.log yapılarak basılmış hali.

THEME — THEMEPROVIDER

  • styled-components’ların bence en karışık konularından birisidir. Bu yapıyı kullanmak mı iyi, yoksa kullanmamak mı daha iyi karar size kalmış.
  • Bu özellikle kendi tema profillerimizi oluşturabiliyoruz. Mesela redTheme, blueTheme, greenTheme diye 3 farklı tema oluşturup bu temalara farklı renk kodları atayabiliyoruz.
  • Aşağıda ki gibi bir dosyada kendimize özel temaları ve keylerini bir objede tutuyoruz.

/root/src/theme.js

  • Daha sonra App.js veya kapsayıcı bir component’da, Theme Providerımızı, tema renklerimizi kullanacağımız tüm objelerin üstüne kaplıyoruz.
  • Oluşturduğumuz tema objelerini buraya import ediyoruz.
  • useState kullanarak theme değişkeni oluşturuyoruz ve default olarak istediğimiz bir tema objesini useState’ye atıyoruz.
  • Bir butona, onClick işlemi için handleTheme fonksiyonu atıyoruz ve böylece bu butonla artık istediğimizde temalarımızı değiştirebilecegiz.
  • Theme Provider’ımızın theme props’una, useState’deki theme state değerimizi veriyoruz.

/root/src/App.js

  • Ve artık aşagıda Navbar component’nda kullandığımız gibi Theme Provider’a verdiğimiz theme objelerinden gelen değeri, styled-component’larımız içinde, props’dan gelen theme’dan yakalayarak kullanabiliriz. Thememiz değiştikçe burada ki renklerde dynamic olarak temanın o değere verdiği renk olacakdır.

/root/src/Navbar.js

AS — PROPS

  • Oluşturduğumuz styled-components’larımızı istersek, daha sonradan as kullanarak özel bir elemente çevirebiliriz. Örneğin, bir yerdeki butonumuz bir yere yönlendirecekse o butonu sadece orası için as propsu vererek a elementine dönüştürebiliriz.

BETTER MIXINS

  • Asağıda iki parça mixin tanımı görüyorsunuz. Üst parcada ki gibi sade mixin yerine, function ile return olan mixinler tanımlamak her zaman için daha iyi olacaktır. Çünkü mixinleri function ile tanımlarsak, içine argument göndererebilir ve bu argumentlere göre functionda hesaplamalar yapabilir ve kullanabiliriz.

Örnek 1: Aslında daha önce yaptığımız eski örnek

  • Default olarak belirli değerler verdik, genelde en cok kullanılan değerler bunlar. Sadece top ve left’e bağımlı olmasınlar diye, belki bazen bottom ve right kullanırız diye de bu key isimlerinide argument olarak istersek gönderebileceğimiz şekilde ayarladık. Ve ortaya süper kullanılabilir bir mixin çıktı.

Örnek 2: Better mixin

  • Kullanmak için tek yazmamız gereken kod aşağıda ki kod. Gördüğünüz gibi ne kadar sade ve kısa. :)

Örnek 3: Bir başka better mixin örneği

BETTER PROPS

  • Varsayalım bir cancel button veya büyük, küçük button yapmak istedik. Her button için ayrı ayrı component oluşturmak yerine, gelen propsları bir tane button component’da asağıda ki gibi yakalayıp, if else ile gelen props değerini sorgulayıp, ona göre değerler belirleyebiliriz.
  • Aşağıda bir button component’i oluşturduk. Ve bu button component ‘type’ ve ‘size’ değerleri alıyor. ‘Type’ ile cancel butonu olup olmadığını, ‘size’ ile de butonun boyut değerlerini öğrenip, ona göre css kodlarını belirleyebilir ve yazabiliriz.

  • Kullanımı ise sadece aşağıda ki gibi.

POLISHED

  • styled-components ile birlikte kullanılan, çok iyi bir css in js, utility kütüphanesidir. Kısaca bu ne demek derseniz. İçerisinde css için hazır fonksiyonlar utilitiesler bulunur ve biz bunları tek satırla uygulamamıza dahil ederiz. Daha da ksıaca styled-components için hazır functionlar üretir. Yukarıda ki gibi kendi utilities’lerimizi oluşturacağımıza, bazen bunları kullanmak daha pratik ve daha mantıklı oluyor.
  • Asağıda ki gibi pratik olarak resetcss veya normalize css’mizi tek satır kod ile ekleyebiliriz.

  • Veya lighten, darken gibi css metodlarını aşağıda ki gibi pratik kullanabiliriz. İlk argument ne kadar oran olacağı, ikinci argument’de renk kodu oluyor.

REFACTORING

  • Burada aynı component’ın 2 farklı şekilde kullanımını göreceğiz.
  • Aşağıda ki kullanımda klasik ilk yöntemle kullanmayı görüyoruz.

  • Burada ise argument olarak verip, gelen className’yi header’a vererek aynı component’ı oluşturuyoruz

  • Ve burada da kodumuzu olabildiğince kısaltıyoruz. Burası aslında bir üsttekinin aynısı, sadece kodumuzu daha kısaltılmış hale getiriyoruz. Direkt return yapıyoruz componentımızı ve export default işlemini, bir değişkene atamadan, direkt yapıyoruz.

FİLE STRUCTURE

  • Burada ise dosya yapısı için ufak bir örnek structure göstereceğim. Sizde buna benzer bir structure yapısı izleyebilirsiniz.

 
Share this