İlk olarak Styled Components ve Emotion gibi CSS-in-JS kütüphanelerini kullandığımda, doğru olan şey, bileşenler için stillere doğrudan değer veya durum geçirme fikriydi. Bu, kullanıcı arayüzünün durumun bir işlevi olduğu React konsepti ile gerçekten uyumluydu. Bu, kesinlikle sınıflar ve önceden işlenmiş CSS ile React'in geleneksel stil yaklaşımının bir adım ileriki bir aşamaydı, ancak yine de sorunları vardı.
Bazı örnekleri vurgulamak için, React bileşenlerinde karşılaşacağınız iki temel dinamik stil türünü kullanarak bazı tipik örnekleri açıklayacağım:
- Değerler: renk, gecikme veya konum gibi, bir CSS özelliği için tek bir değeri temsil eden herhangi bir şey.
- Durumlar: birincil düğme varyantı veya kendi ilişkili stiller kümesine sahip bir yükleme durumu gibi, her biri kendi seti olan durumlar.
Günümüzde Neredeyiz
Başlamadan önce, karşılaştırma yapmak için örneklerimde SCSS (BEM sözdizimi ile) ve Styled Components'ı kullanacağım. Örneklerde, React'te stil yaklaşımının tipik olarak nasıl ele alındığını göstereceğim. CSS olarak JavaScript nesneleri olarak CSS yazan CSS-in-JS kütüphanelerini ele almayacağım. Bence zaten iyi çözümler mevcut (tercihen Vanilla Extract) ve eğer tür denetimi istiyorsanız ve daha fazla JavaScript tarafında olmayı tercih ediyorsanız. Benim çözümüm, CSS'i CSS olarak yazmayı seven, ancak bileşenlerin tepkiselliğine ve durumuna daha iyi bir şekilde yanıt vermek isteyenler için daha çok.
Sorunu zaten biliyorsanız, çözüme geçin.
Değerler
Saf CSS kullanarak veya LESS veya SCSS yoluyla önceden işlenmiş CSS kullanarak, stillerinize değer geçirmenin geleneksel yolu, iç içe stilleri kullanmaktı. Bu nedenle, rengi olan bir düğme bileşenimiz varsa, şöyle görünebilir:
function Button({ color, children }) {
return (
<button className="button" style={{ backgroundColor: color }}>
{children}
</button>
);
}