Bagaimanakah Saya Boleh Memastikan CSS Skop Komponen dalam Aplikasi Reaksi Saya?

Import CSS skop komponen dalam React

Mengimport CSS ke dalam komponen React adalah penting untuk penggayaan, tetapi memastikan gaya skop komponen boleh mencabar . Dalam kes anda, anda mahu CSS digunakan hanya pada elemen dalam komponen tertentu dan hilang apabila komponen dinyahlekap.

Satu pendekatan ialah menggunakan Modul CSS, teknik popular untuk mencapai penggayaan skop komponen dalam React . Dengan Modul CSS, nama kelas dan nama animasi dalam fail CSS yang ditentukan diskop secara tempatan secara lalai. Ini memastikan gaya digunakan hanya pada elemen dalam komponen yang mengimport modul.

Pertimbangkan contoh ini:

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}
export default Button;

/* ./styles/button.css */
.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

Menggunakan Modul CSS, CSS yang dijana akan masukkan nilai cincang yang dijana secara rawak, memastikan nama kelas unik untuk setiap komponen. Ini menghalang konflik gaya merentas komponen.

Pendekatan alternatif adalah untuk mengelakkan pemilih generik dan menggunakan konvensyen penamaan berasaskan kelas untuk komponen dan elemen. Contohnya:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

Dengan memberikan nama kelas unik kepada semua elemen, anda boleh menghalang pertembungan gaya tanpa bergantung pada Modul CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan CSS Skop Komponen dalam Aplikasi Reaksi Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!