Cara Menggayakan Komponen Reaksi Menggunakan Modul CSS

Cara Menggayakan Komponen Reaksi Menggunakan Modul CSS

Modul CSS menyediakan cara untuk menskop nama kelas CSS secara setempat. Anda tidak perlu risau tentang gaya mengatasi apabila anda menggunakan nama kelas yang sama.





Ketahui cara modul CSS berfungsi, sebab anda perlu menggunakannya dan cara melaksanakannya dalam projek React.



Apakah Modul CSS?

The Dokumen modul CSS huraikan modul CSS sebagai fail CSS yang nama kelasnya diskop secara tempatan secara lalai. Ini bermakna anda boleh menangani pembolehubah CSS dengan nama yang sama dalam fail CSS yang berbeza.





Anda menulis kelas modul CSS sama seperti kelas biasa. Kemudian pengkompil menjana nama kelas yang unik sebelum menghantar CSS ke penyemak imbas.

Sebagai contoh, pertimbangkan kelas .btn berikut dalam fail yang dipanggil styles.modules.css:



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

Untuk menggunakan fail ini, anda perlu mengimportnya ke dalam fail JavaScript.

import styles from "./styles.module.js"

Sekarang, untuk merujuk kelas .btn dan menjadikannya tersedia dalam elemen, anda akan menggunakan kelas seperti yang ditunjukkan di bawah:



class="styles.btn"

Proses binaan akan menggantikan kelas CSS dengan nama unik format seperti _styles__btn_118346908.

Keunikan nama kelas bermakna, walaupun anda menggunakan nama kelas yang sama untuk komponen yang berbeza, mereka tidak akan berlanggar. Anda boleh menjamin kebebasan kod yang lebih besar kerana anda boleh menyimpan gaya CSS komponen dalam satu fail, khusus untuk komponen itu.



Ini memudahkan penyahpepijatan, terutamanya jika anda bekerja dengan berbilang helaian gaya. Anda hanya perlu menjejaki modul CSS untuk komponen tertentu.

Modul CSS juga membolehkan anda menggabungkan berbilang kelas melalui mengarang kata kunci. Sebagai contoh, pertimbangkan kelas .btn berikut di atas. Anda boleh 'melanjutkan' kelas itu dalam kelas lain menggunakan karang.

Untuk butang hantar, anda boleh mempunyai:

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Ini menggabungkan kelas .btn dan .submit. Anda juga boleh mengarang gaya daripada modul CSS lain seperti ini:

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

Ambil perhatian bahawa anda mesti menulis peraturan mengarang sebelum peraturan lain.

Cara Menggunakan Modul CSS dalam React

Cara anda menggunakan modul CSS dalam React bergantung pada cara anda mencipta aplikasi React.

Jika anda menggunakan aplikasi create-react, modul CSS disediakan di luar kotak. Walau bagaimanapun, jika anda akan mencipta aplikasi dari awal, anda perlu mengkonfigurasi modul CSS dengan pengkompil seperti webpack.

apakah voltan di telefon saya

Untuk mengikuti tutorial ini, anda sepatutnya mempunyai:

  • Nod dipasang pada mesin anda.
  • Pemahaman asas modul ES6.
  • Satu asas pemahaman React .

Mencipta Aplikasi React

Untuk memastikan perkara mudah, anda boleh menggunakan buat-react-app untuk merancah apl React.

Jalankan arahan ini untuk buat projek React baharu dipanggil react-css-modules:

npx create-react-app react-css-modules

Ini akan menghasilkan fail baharu yang dipanggil react-css-modules dengan semua kebergantungan yang diperlukan untuk bermula dengan React.

Mencipta Komponen Butang

Anda akan membuat komponen Button dan modul CSS yang dipanggil Button.module.css dalam langkah ini. Dalam folder src, buat folder baharu yang dipanggil Komponen. Dalam folder itu buat folder lain yang dipanggil Button. Anda akan menambah komponen Button dan gayanya dalam folder ini.

Navigasi ke src/Komponen/Butang dan buat Button.js.

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

Seterusnya, buat fail baharu yang dipanggil Button.module.css dan tambah yang berikut.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Untuk menggunakan kelas ini dalam komponen Button, importnya sebagai gaya dan rujuknya dalam nama kelas elemen butang seperti ini:

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

Ini adalah contoh mudah yang menunjukkan cara menggunakan satu kelas. Anda mungkin mahu berkongsi gaya merentas komponen yang berbeza atau bahkan menggabungkan kelas. Untuk ini, anda boleh menggunakan kata kunci mengarang seperti yang dinyatakan sebelum ini dalam artikel ini.

Menggunakan Komposisi

Mula-mula, ubah suai komponen Button dengan kod berikut.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

Kod ini menjadikan komponen Butang lebih dinamik dengan menerima nilai jenis sebagai prop. Jenis ini akan menentukan nama kelas yang digunakan pada elemen butang. Jadi jika butang itu adalah butang hantar, nama kelas akan 'serahkan'. Jika ia adalah 'ralat', nama kelas akan menjadi 'ralat', dan seterusnya.

Untuk menggunakan kata kunci karang dan bukannya menulis semua gaya untuk setiap butang dari awal tambahkan yang berikut pada Button.module.css.

.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; 
}

Dalam contoh ini, kelas primer dan kelas menengah menggunakan kelas btn. Dengan melakukan ini, anda mengurangkan jumlah kod yang anda perlukan untuk menulis.

Anda boleh mengambil ini lebih jauh dengan modul CSS luaran yang dipanggil color.module.css , yang mengandungi warna yang digunakan dalam aplikasi. Anda kemudian boleh menggunakan modul ini dalam modul lain. Sebagai contoh, cipta fail colors.module.css dalam akar folder Komponen dengan kod berikut:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Sekarang dalam fail Button/Button.module.css, ubah suai kelas primer dan sekunder untuk menggunakan kelas di atas seperti ini:

.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"; 
}

Sass Dengan Modul CSS

Anda boleh menggunakan modul CSS untuk meningkatkan modulariti pangkalan kod anda. Sebagai contoh, anda boleh mencipta kelas CSS mudah untuk komponen butang dan menggunakan semula kelas CSS melalui gubahan.

Untuk memperkasakan penggunaan modul CSS anda, gunakan Sass. Sass—Helaian Gaya Hebat Secara Sintaksis—ialah prapemproses CSS yang menyediakan satu tan ciri. Ia termasuk sokongan untuk bersarang, pembolehubah dan warisan yang tidak tersedia dalam CSS. Dengan Sass, anda boleh menambah ciri yang lebih kompleks pada aplikasi anda.