CSS modülleri, CSS sınıf adlarını yerel olarak kapsamanın bir yolunu sağlar. Aynı sınıf adını kullandığınızda stilleri geçersiz kılma konusunda endişelenmenize gerek yok.

CSS modüllerinin nasıl çalıştığını, bunları neden kullanmanız gerektiğini ve bunları bir React projesinde nasıl uygulayacağınızı öğrenin.

CSS Modülleri Nelerdir?

bu CSS modülleri belgeleri bir CSS modülünü, sınıf adları varsayılan olarak yerel olarak kapsamlandırılmış bir CSS dosyası olarak tanımlayın. Bu, farklı CSS dosyalarında aynı ada sahip CSS değişkenlerini adresleyebileceğiniz anlamına gelir.

Normal sınıflar gibi CSS modül sınıfları yazıyorsunuz. Ardından derleyici, CSS'yi tarayıcıya göndermeden önce benzersiz sınıf adları oluşturur.

Örneğin, style.modules.css adlı bir dosyada aşağıdaki .btn sınıfını düşünün:

.btn {
 genişlik: 90 piksel;
 yükseklik: 40 piksel;
 dolgu: 10px 20px;
}

Bu dosyayı kullanmak için onu bir JavaScript dosyasına aktarmanız gerekir.

içe aktarmak stiller itibaren "./styles.module.js"

Şimdi, .btn sınıfına başvurmak ve onu bir öğede kullanılabilir hale getirmek için sınıfı aşağıda gösterildiği gibi kullanırsınız:

instagram viewer 

sınıf="styles.btn"

Oluşturma işlemi, CSS sınıfını aşağıdaki gibi benzersiz bir adla değiştirecektir: _styles__btn_118346908.

Sınıf adlarının benzersizliği, farklı bileşenler için aynı sınıf adını kullansanız bile bunların çakışmayacağı anlamına gelir. Bir bileşenin CSS stillerini o bileşene özel tek bir dosyada saklayabileceğiniz için daha fazla kod bağımsızlığını garanti edebilirsiniz.

Bu, özellikle birden çok stil sayfasıyla çalışıyorsanız hata ayıklamayı basitleştirir. Yalnızca belirli bir bileşen için CSS modülünü izlemeniz gerekir.

CSS modülleri, birden çok sınıfı birleştirmenize de olanak tanır. besteler anahtar kelime. Örneğin, yukarıdaki .btn sınıfını düşünün. Besteleri kullanarak bu sınıfı diğer sınıflarda "genişletebilirsiniz".

Gönder düğmesi için şunlara sahip olabilirsiniz:

.btn {
/* stiller */
}
.Sunmak {
 oluşturur: btn;
 arka plan rengi: yeşil;
 renk:#FFFFFF
}

Bu, .btn ve .submit sınıflarını birleştirir. Bunun gibi başka bir CSS modülünden stiller de oluşturabilirsiniz:

.Sunmak {
 oluşturur: birincil "./colors.css"
 arka plan rengi: yeşil;
}

Oluşturma kuralını diğer kurallardan önce yazmanız gerektiğini unutmayın.

React'te CSS Modülleri Nasıl Kullanılır?

React'te CSS modüllerini nasıl kullandığınız, React uygulamasını nasıl oluşturduğunuza bağlıdır.

Create-react-app kullanıyorsanız, CSS modülleri kutudan çıkar. Ancak uygulamayı sıfırdan oluşturacaksanız, webpack gibi bir derleyici ile CSS modüllerini yapılandırmanız gerekecektir.

Bu eğiticiyi takip etmek için şunlara sahip olmalısınız:

  • Makinenizde yüklü düğüm.
  • ES6 modüllerinin temel bir anlayışı.
  • temel React'i anlamak.

Bir React Uygulaması Oluşturma

İşleri basit tutmak için kullanabilirsiniz oluştur-tepki-uygulaması bir React uygulamasını desteklemek için.

için bu komutu çalıştırın yeni bir React projesi oluştur tepki-css-modülleri denir:

npx oluşturmak-react-app tepki-css-modülleri

Bu, React'i kullanmaya başlamak için gereken tüm bağımlılıkları içeren tepki-css-modülleri adlı yeni bir dosya oluşturacaktır.

Düğme Bileşeni Oluşturma

Bu adımda bir Button bileşeni ve Button.module.css adında bir CSS modülü oluşturacaksınız. src klasöründe Bileşenler adlı yeni bir klasör oluşturun. Bu klasörde Button adlı başka bir klasör oluşturun. Düğme bileşenini ve stillerini bu klasöre ekleyeceksiniz.

Şu yöne rotayı ayarla kaynak/Bileşenler/Düğme ve Button.js'yi oluşturun.

ihracatvarsayılanişlevButon() {
dönüş (
<buton>Göndermek</button>
 )
}

Ardından Button.module.css adında yeni bir dosya oluşturun ve aşağıdakileri ekleyin.

.btn {
 genişlik: 90 piksel;
 yükseklik: 40 piksel;
 dolgu: 10px 20px;
 sınır yarıçapı: 4 piksel;
 sınır: yok;
}

Bu sınıfı Button bileşeninde kullanmak için onu stiller olarak içe aktarın ve aşağıdaki gibi button öğesinin sınıf adında referans alın:

içe aktarmak stiller itibaren "./Button.module.css"
ihracatvarsayılanişlevButon() {
dönüş (
<düğme className={styles.btn}>Göndermek</button>
 )
}

Bu, tek bir sınıfın nasıl kullanılacağını gösteren basit bir örnektir. Stilleri farklı bileşenler arasında paylaşmak veya hatta sınıfları birleştirmek isteyebilirsiniz. Bunun için bu makalede daha önce bahsedildiği gibi composes anahtar sözcüğünü kullanabilirsiniz.

Kompozisyonu Kullanma

İlk olarak, Button bileşenini aşağıdaki kodla değiştirin.

içe aktarmak stiller itibaren "./Button.module.css"
ihracatvarsayılanişlevButon({type="birincil", etiket="Düğme"}) {
dönüş (
<düğme className={styles[type]}>{etiket}</button>
 )
}

Bu kod, bir tür değerini prop olarak kabul ederek Button bileşenini daha dinamik hale getirir. Bu tür, düğme öğesine uygulanan sınıf adını belirleyecektir. Yani bu buton bir gönder butonu ise, sınıf adı "gönder" olacaktır. Eğer "hata" ise, sınıf adı "hata" olacaktır, vb.

Her düğme için tüm stilleri sıfırdan yazmak yerine composes anahtar sözcüğünü kullanmak için Button.module.css'ye aşağıdakileri ekleyin.

.btn {
 genişlik: 90 piksel;
 yükseklik: 40 piksel;
 dolgu: 10px 20px;
 sınır yarıçapı: 4 piksel;
 sınır: yok;
}
.öncelik {
 oluşturur: btn;
 renk: #FFFFFF;
 arka plan rengi: #6E41E2;
}
.ikincil {
 oluşturur: btn;
 renk: #6E41E2;
 arka plan rengi: #FFFFFF;
}

Bu örnekte, birincil sınıf ve ikincil sınıf, btn sınıfını kullanır. Bunu yaparak, yazmanız gereken kod miktarını azaltırsınız.

adlı harici bir CSS modülü ile bunu daha da ileri götürebilirsiniz. renkler.module.css, uygulamada kullanılan renkleri içerir. Daha sonra bu modülü diğer modüllerde kullanabilirsiniz. Örneğin, aşağıdaki kodla Components klasörünün kökünde color.module.css dosyasını oluşturun:

.birincilBg {
 arka plan rengi: #6E41E2
}
.sekonderBg {
 arka plan rengi: #FFFFFF
}
.ana renk {
 renk: #FFFFFF
}
.ikincil renk {
 renk: #6E41E2
}

Şimdi Button/Button.module.css dosyasında, yukarıdaki sınıfları aşağıdaki gibi kullanmak için birincil ve ikincil sınıfları değiştirin:

.öncelik {
 oluşturur: btn;
 oluşturur: birincilColor from "../colors.module.css";
 oluşturur: birincilBg from "../colors.module.css";
}
.ikincil {
 oluşturur: btn;
 oluşturur: ikincil Renk "../colors.module.css";
 oluşturur: ikincilBg "../colors.module.css";
}

CSS Modülleri ile Sass

Kod tabanınızın modülerliğini geliştirmek için CSS modüllerini kullanabilirsiniz. Örnek olarak, bir düğme bileşeni için basit bir CSS sınıfı oluşturabilir ve CSS sınıflarını kompozisyon aracılığıyla yeniden kullanabilirsiniz.

CSS modülleri kullanımınızı güçlendirmek için Sass kullanın. Sass — Sözdizimsel Olarak Müthiş Stil Sayfaları — bir ton özellik sağlayan bir CSS ön işlemcisidir. CSS'de bulunmayan iç içe yerleştirme, değişkenler ve kalıtım için destek içerirler. Sass ile uygulamanıza daha karmaşık özellikler ekleyebilirsiniz.