React Native/JS styled-components kullanımı (pt 2 / detaylı anlatım)
Daha evvelki yazımda giriş yapmış olduğum styled-components kullanımının derinlerine ve püf noktalarına değinmeye çalışacağım bu yazımda. Ek olarak, yeni kullanmaya başlayanlar ve hali hazırda kullananlar için daha ileri seviye bir doküman oluşturmaya çabalayacağım.
İlk olarak söylemek gerekir ki, ‘bir kere yaz her yerde kullan’ mantığına çok uygun bir kütüphane styled-components. Ayrıca yazdıklarımızı react-native-for-web’de de kullanabilmekteyiz. Yani hem native bileşenler hem de direkt web bileşenleri şekillendirilebilmekte styled-components yardımıyla, şöyle ki:
Bu girişten sonraki kısımda styled-components’in pek dikkat çekmeyen veya az bilinen özelliklerine vurgu yapmaya çalışacağım…
- Mesela auto-prefixing konusunda bize fazlaca yardımcı olan styled components, bu noktada işimizi oldukça kolaylaştırıyor. Geleneksel css dosyalarında dahi bunları detaylandırmamız gerekirken styled components bunu bizim yerimize yapıyor:
- props yardımıyla optional bir style elde edebilmemize olanak sağlıyor:
- props’u short-if yöntemiyle kullanıp daha komplike ancak daha kısa kodlar elde edebiliyoruz:
- ‘attrs’ (type, classname vb.) html-css bileşenini de kullanabilmekteyiz:
- withComponent özelliği yardımıyla iki bileşeni kaynaştırabiliriz, örneğin bir ‘button’ ve bir ‘a’ bileşeni:
- nested-rule ve media-query’ler yazabilmekteyiz:
- theme context’ler eklenebilmekte ve override edilebilmekte:
- Compositon ve Mixin kullanılabilmekte:
- Son olarak söylemek istediğim konu ise oldukça önemli. styled ve inline styled alanları override edebilmekteyiz:
KAYNAKÇA:
https://blog.bitsrc.io/9-react-styled-components-ui-libraries-for-2018-4e1a0bd3e179
https://facebook.github.io/react-native/docs/style
https://www.styled-components.com/docs/basics
https://www.styled-components.com/docs/advanced
github.com/styled-components/styled-components
medium.com/@temreyildirim8/react-native-styled-components-kullanımına-giriş-5f206114e2cc
