React'ta CSS modülleri için composes komutu
composes komutu, stillerin bir dosyadan
diğerinde yeniden kullanılması için de
uygulanabilir.
Önceki derslerde yaptığımız buttons
uygulamasına dönelim.
Tüm butonlara aynı gölgeleri, imleç stilini
ve kalın yazı tipini eklemek istediğimizi varsayalım.
Bu stillerin App.module.css dosyasında
bulunmasına izin verin.
Bu dosyayı açalım ve başına bu stillerle
yeni bir beauty sınıfı ekleyelim:
.beauty {
box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
font-weight: bold;
cursor: pointer;
}
Butonları stilize etmek için onu uygulayalım.
Bunun için Buttons.module.css dosyasını açalım ve
common-btn sınıfında değişiklikler yapalım.
composes komutuyla bir satır ekleyeceğiz,
burada uygulamak istediğimiz beauty sınıfının adını
ve bu sınıfın bulunduğu App.module.css dosyasını
belirteceğiz:
.common-btn {
composes: beauty from "../App.module.css";
font-size: 16px;
border-radius: 3px;
}
Uygulamanızın kodunu önceki ders için görevden alın ve input'larınıza bu derste gösterilen yöntemi kullanarak bir gölge yapın.