⊗jsrtPmSyCMCS 109 of 112 menu

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.

Türkçe
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenЎзбекOʻzbekTiếng Việt
Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.
tümünü kabul et özelleştir reddet