React'te CSS Modüllerini Kullanma

CSS Modülleri ve bunları React Uygulamanıza nasıl uygulayacağınızla ilgili bir durum

CSS'de nispeten yeniyseniz, bir uygulamanın stili genişledikçe ortaya çıkan önemli sorunla karşılaşmış olabilirsiniz veya olmayabilir - CSS kuralları genel kapsamı takip ettiğinden , aynı ada sahip iki veya daha fazla sınıf çakışacaktır . Birden çok stil sayfasını kullanmak ve CSS dosyalarındaki adlandırma kurallarını takip etmek külfetli olabilir ve yeterince dikkatli değilseniz, aynı sınıf adlarından bazı çatışmalarla karşılaşabilirsiniz.

CSS Modülleri, özellikle uygulamanız büyüdükçe ortaya çıkması muhtemel bu hataları çözebilir. Nihayetinde , varsayılan olarak sınıf adlarını yerel olarak kapsayarak, aynı sınıf adını seçici ve kural hataları olmadan birden çok dosyada kullanmamıza izin verirler .

Bir CSS Modülü, .csssınıfların Javascript'teki yerel değişkenlere benzer şekilde davrandığı bir dosyadır. Adına bir hash ekleyerek her sınıfı benzersiz kılan bir araçtır.

CSS Modülü Oluşturma

Eğer kullanıyorsanız create-react-app, bir bileşen için CSS Modülü yapmak nispeten kolaydır. Bir css dosyası için tipik adlandırma kuralını izleyin, ancak daha moduleönce ekleyin .css:[name].module.css

Bir örnek görmek için, işte Task.module.cssdosyam basit bir yapılacaklar uygulamasında:

Başka varsa boxfarklı bir renge sahip farklı bir bileşen sınıfı, bu kurallar olacak değil modülleri uygulamak beri çarpışır yerel kapsamını .

Bir CSS Modülünü ilgili bileşene içe aktarmak için css modülleri stil sayfasını stylesveya olarak içe aktarın [name]Styles:

JSX'te, tanımlanmış CSS sınıfını aşağıdaki gibi bir className özelliği olarak kullanın:

Buradan istediğiniz kadar çok CSS modülü ekleyebilirsiniz, her birini farklı bir adla içe aktarmayı unutmayın.

CSS Modülleri ile taşınabilir, yeniden kullanılabilir CSS dosyaları oluşturabilir ve artık seçici ad çakışmaları veya başka bir bileşenin stillerini etkileyen kurallarla ilgilenmenize gerek kalmaz.

Genellikle, geliştiriciler React uygulamaları için stil verme kararıyla karşı karşıya kaldıklarında, CSS Modülleri veya CSS-in-JS ( CSS'yi bileşen düzeyinde soyutlama aracı ) kitaplığı, stil verilmiş bileşenler, Emotion veya stilli-jsx gibi kullanım arasında kalırlar. CSS-in-JS kitaplıkları stilleri bildirimli olarak açıklamak için daha yaygın olarak kullanılmaya başladıkça ve ana akım hale geldikçe, birçok kişinin hala CSS Modüllerinin, özellikle stil deneyimini çok daha fazla hale getiren modüler ve yeniden kullanılabilir nitelikleri için gitmenin yolu olduğuna inandıklarını fark ettim. kesintisiz.