Melaksanakan Modul CSS dalam Projek Reaksi Anda

Modul CSS dalam React ialah cara untuk menskop CSS dengan menjana nama kelas unik secara automatik. Ini menghalang perlanggaran nama kelas dalam aplikasi besar dan membolehkan gaya modular. Begini cara anda boleh menggunakan Modul CSS dalam projek React:

1. Persediaan

Secara lalai, React menyokong Modul CSS. Anda hanya perlu menamakan fail CSS anda dengan sambungan .module.css.

2. Contoh Persediaan

Struktur Fail:

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

Button.module.css:

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

Button.js:

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    <button classname="{styles.button}">
      Click Me
    </button>
  );
}

export default Button;

Cara Ia Berfungsi:

• Button.module.css: Anda mentakrifkan peraturan CSS seperti mana-mana fail CSS biasa.
• styles.button: Nama kelas daripada modul CSS diimport sebagai objek JavaScript. Anda merujuk mereka menggunakan styles.className.

Faedah:

• Gaya skop: Setiap kelas skop setempat kepada komponen, mengelakkan perlanggaran nama.
• Kebolehselenggaraan: Apabila aplikasi anda berkembang, CSS anda kekal modular dan lebih mudah untuk diurus.

Beri tahu saya jika anda memerlukan bantuan dengan kes tertentu!

Atas ialah kandungan terperinci Melaksanakan Modul CSS dalam Projek Reaksi Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!