React — Component Stillendirme
Bu yazımda sizlere react componentlerine nasıl farklı yollarla stillendirme yapabiliriz ondan bahsedeceğim. Bahsedeceğim bu yollar Inline Style , Css Stylesheets , Css Modules ve Styled Components. Hemen Inline Style ile giriş yapalım.
1-Inline Style
Bir jsx elemanına inline-style verilirken şu kurallar uygulanır. İlk olarak style verilirken JavaScript objeleri oluşturulur. Diğer bir kural ise iki kelimelik bir style özelliği (font-size gibi.) verilecekse camelCase kullanılır. Örnek üzerinden anlattıklarımızı somutlaştıralım.
Örnekte görüldüğü gibi h1'e style verilirken bir JS objesinden yararlanılmış ve özellikler o şekilde verilmiş. Diğer bir kural olan camelCase yazım ise background-color → backgroundColor şeklinde uygulanmış.
Yukarıdaki örnekte görüldüğü gibi bir diğer kullanım şeklide verilen özellikler bir JS objesi şeklinde verildiğinden bu özellikler const ile dışarıda tanımlanıp style kısmına verilebilir. Ayrıca mevcut özelliklere ek olarak bir başka özellikte p’ye uygulandığı gibi uygulanabilir. Bu özelliğin nasıl kullanıldığını anlamak için şurayı inceleyebilirsiniz.
2-Css Stylesheets
Css Stylesheets yöntemi hepimizin bildiği üzere css dosyalarının js dosyalarından ayrı bir ortamda tutulduğu kullanım şeklidir. create-react-app ile proje oluşturduğumuzda app.css olarak gelen dosya bu kullanıma örnektir. Hemen bir örnekle pekiştirelim.
header.css dosyasında verilen özellikler className=”classAdı” şeklinde verilerek kullanılır. Bu kullanım için header.css dosyasının kullanılacağı sayfaya import edilmesi gerekir.
3-Css Modules
Css Modules yönteminde de Css Stylesheets yönteminde olduğu gibi css dosyaları js dosyalarından ayrı tutulur ve bu sefer özellikler dahil edilirken import edildiği ad ile beraber kullanılır. Hemen örnekle gösterelim.
4-Styled Components
Stillendirme yöntemlerinde en çok tercih edilen yöntemlerden biridir.Hem react hem de react native componentlerini stillendirmede kullanılabilir. Automatic critical CSS özelliği sayesinde sayfada sadece render edilmiş componentlere ait css özelliklerini ekleyerek performans ve gereksiz kod kullanımından kaçınma gibi artı iyileştirmeler sunar.
Örnekte görüldüğü üzere stillendirilmiş bir Title component oluşturulacağı için h1 etiketinden yararlanılıyor. Eğer bir container alanı için oluştursaydık h1 yerine div de diyebilirdik. Diğer bir dikkat çekmek istediğim nokta ise dinamik olarak css özellikleri verilebiliyor. Aynı özelliklere sahip stillendirmiş Title componentinde bg props’na göre background-color özelliği verilebildi.
Son olarak yukarıdaki kullanımdan bahsetmek istiyorum. Stillendirilmiş Title componentinden sadece font-weight özelliği farklı olan bir Subtitle stillendirilmiş component oluşturmak istersem yukarıdaki kullanımla styled(Title) diyerek var olan özellikleri Title ‘ dan al ve üzerine font-weight özelliğini ekle demiş oluyoruz. Aynı zamanda hover,focus gibi işlemleri de &: şeklinde tanımlayabiliriz.
Böylelikle bir yazının daha sonuna geldik. Öğrendiğimiz tüm yeni bilgileri geliştirme süreçlerimize dahil edebilmenin umuduyla bir sonraki yazıda görüşmek üzere :)
Öğrenmek ve öğretmek için takipte kalın..
