Konflik CSS dalam React

UI ialah langkah pertama sebelum kita mula menaip logik untuk melengkapkan bahagian hadapan kita. Jadi kami menulis markup diikuti dengan gaya penting yang diperlukan untuk mendapatkan ui yang diingini. Semasa menulis markup kita perlu mencipta nama kelas yang bermakna untuk menangani dan mengakses teg HTML dan menambah gaya padanya. Dengan UI yang ringkas dan teg yang berbeza, kami boleh melakukannya dengan lebih kurang mudah. Semasa menulis UI berulang dan kompleks, memberikan nama yang bermakna dan berbeza menjadi bencana kerana terdapat hanya beberapa nama generik. Jadi kami mencipta komponen dan helaian gaya untuk komponen individu. Seperti yang ditunjukkan di bawah.

Kita dapat melihat dua komponen, GreenContainer dan RedContainer sedang diimport ke App.js daripada folder komponen di dalam src. Helaian gaya masing-masing ialah RedContainer.css dan GreenContainer.css, yang diimport daripada folder gaya. Mari lihat kedua-dua komponen dan helaian gayanya satu persatu.

Komponen pertama, RedContainer.jsx

Helaian gaya masing-masing ialah - RedContainer.css

Sekarang lihat komponen kedua, GreenContainer.js -

Fail CSS untuk komponen kedua, GreenContainer.css

Kedua-dua helaian gaya mengandungi sifat CSS yang berbeza untuk komponen masing-masing. Jadi hasil UI yang dijangkakan mungkin skrin yang terdapat dua blok, satu ialah segi empat sama merah dengan lengan 150px dan satu lagi ialah segi empat sama hijau dengan lengan 200px. Mari lihat apl React yang diberikan.

Mengapa ini berlaku? Sifat CSS daripada bekas terakhir telah digunakan pada kedua-dua bekas. Tetapi bagaimana? Jawapannya ialah sejurus sebelum apl React dipaparkan semua helaian gaya disusun ke dalam satu fail CSS, di mana terdapat dua pemilih kelas dengan nama yang sama - ".container" dan inilah sebabnya sifat CSS daripada ".container{ yang terakhir }" telah digunakan pada semua bekas di seluruh dunia. Isu ini boleh diselesaikan dengan menggunakan Modul CSS. Modul CSS ialah fail CSS di mana semua nama kelas diskop secara setempat secara lalai. Ini membantu kami dalam cara berikut

1) Menyetempatkan gaya kepada komponen tertentu menghalang konflik skop global ini.

2) Benarkan penggunaan nama kelas yang sama dalam modul berbeza dan galakkan penggayaan modular.

Untuk menggunakan penggayaan modular kita perlu menggantikan ".css" dengan ".module.css" dan mengimport 'gaya' daripada fail tersebut.

Mengimport gaya ke komponen masing-masing. Untuk RedContainer -

Untuk GreenContainer

Secara umum, kami menulis className sebagai rentetan seperti ini, jika className ialah "container" kami akan menulis className = "container". Untuk Modul CSS kami akan menulis nama kelas seperti ini className = {styles.container} dalam fail jsx. Sekarang mari lihat apl reaksi yang diberikan -

Kini tiada isu konflik CSS dan gaya digunakan pada komponen masing-masing dengan sewajarnya.

Atas ialah kandungan terperinci Konflik CSS dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!