Bagaimanakah Saya Boleh Mencapai CSS Skop Komponen dalam Reaksi untuk Mengelakkan Konflik Gaya?

Skop CSS dalam Komponen React

Masalahnya

Dalam aplikasi React menggunakan ES6, fail CSS yang berasingan boleh diimport ke dalam komponen. Walau bagaimanapun, apabila diimport dengan cara ini, CSS sering dipaparkan secara global, menjejaskan semua komponen. Ini boleh membawa kepada konflik CSS dan penggayaan yang tidak diingini.

CSS berskop komponen

Tingkah laku yang diingini adalah untuk CSS diskop kepada komponen individu, memastikan gaya hanya digunakan dalam skop komponen tersebut. Ini bermakna gaya hendaklah "tempatan" kepada komponen, hilang apabila komponen dinyahlekap.

Penyelesaian

Untuk mencapai CSS skop komponen, pertimbangkan untuk menggunakan Modul CSS atau CSS-in yang serupa -Pakej JS. Contohnya termasuk Emosi, Komponen Bergaya atau pakej daripada katalog luas npm.

Modul CSS, contohnya, menyediakan mekanisme untuk skop nama kelas dan nama animasi secara setempat. URL dan import dikendalikan dalam format permintaan modul.

Contoh dengan Modul CSS

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;

Dengan Modul CSS, CSS yang dijana mungkin kelihatan seperti:

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

The nama kelas unik dengan cincangan _3GjDE menghalang konflik dengan merangkum gaya ke Butang komponen.

Pendekatan Alternatif

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

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

Setiap elemen yang memerlukan penggayaan akan menerima nama kelas yang unik, memastikan gaya hanya digunakan dalam komponen tertentu.

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