React'ta CSS modüllerinde sınıflar için composes komutu
Bu derste, CSS modüllerinde bir CSS sınıfının stillerini başka bir sınıfta yeniden kullanmak için çok faydalı bir tekniği ele alacağız.
Önceki derslerde yaptığımız buttons uygulamasına dönelim. Buttons.module.css dosyasına bir göz atalım:
.btn1 {
background-color: orange;
border: 2px solid brown;
color: white;
}
.btn2 {
background-color: red;
border: 2px solid green;
color: yellow;
}
.btn3 {
background-color: brown;
border: 2px solid yellowgreen;
color: orange;
}
Diyelim ki tüm butonların aynı köşe yuvarlaklığına ve font boyutuna sahip olmasını istiyoruz. Tabii ki, her sınıfa aynı özellikleri yazabiliriz. Ancak CSS modüllerinden gelen composes komutu sayesinde, farklı bir şekilde hareket edeceğiz.
İlk olarak, bu ortak özellikleri yerleştireceğimiz, örneğin common-btn adında başka bir sınıf oluşturacağız. Ve bu sınıftaki özellikleri diğerlerinde uygulamak için, onlarda aşağıdaki sözdizimini kullanmamız gerekiyor:
seçici {
composes: sınıf adı;
}
Şimdi Buttons.module.css dosyamızın kodu şu şekilde görünecek:
.common-btn {
font-size: 16px;
border-radius: 3px;
}
.btn1 {
composes: common-btn;
background-color: orange;
border: 2px solid brown;
color: white;
}
.btn2 {
composes: common-btn;
background-color: red;
border: 2px solid green;
color: yellow;
}
.btn3 {
composes: common-btn;
background-color: brown;
border: 2px solid yellowgreen;
color: orange;
}
Önceki derslerdeki görevlerde yaptığınız inputs React uygulamanızı alın. Tüm input'lar için değerleri aynı olan birkaç ortak CSS stili ekleyin. Bu stillerin yazılı olduğu ek bir sınıf oluşturun. composes kullanarak bu stilleri input'lar için olan diğer tüm sınıflara yayın.