CSS Modüllerini Kullanarak React Bileşenlerine Nasıl Stil Verilir

CSS Modüllerini Kullanarak React Bileşenlerine Nasıl Stil Verilir

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 yoktur.





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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

import styles from "./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:



class="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.

Windows 10'da komut istemi nasıl kullanılır

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 { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Bu, .btn ve .submit sınıflarını birleştirir. Ayrıca aşağıdaki gibi başka bir CSS modülünden stiller oluşturabilirsiniz:

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

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 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 create-react-app react-css-modules

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.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

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

farklı saç renklerini denemek için uygulama 
.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

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:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</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.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</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'e aşağıdakileri ekleyin.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #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:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #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:

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../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çok ö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.