Bagaimanakah Saya Boleh Mencapai Import CSS Skop Komponen dalam React?

Import CSS Skop Komponen dalam React

Pengenalan
Banyak aplikasi React menghadapi cabaran dalam mengurus gaya CSS, terutamanya apabila berurusan dengan berbilang komponen. Untuk memastikan pengasingan yang betul dan mengelakkan gaya global, anda mungkin mahu melaksanakan import CSS skop komponen.

Modul CSS
Pendekatan popular untuk mencapai import CSS skop komponen adalah melalui CSS Modul. Dengan Modul CSS, nama kelas dan nama animasi diskop secara automatik dalam komponen tempat fail CSS diimport. URL dan import juga mematuhi sintaks permintaan modul, memastikan gaya diasingkan dalam komponen.

Kod Contoh
Pertimbangkan komponen React dan CSS yang disertakan dengannya fail:

Komponen

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;

CSS

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

Transformasi Pasca-CSS
Selepas Modul CSS melakukan transformasinya, output CSS akan kelihatan seperti:

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

Akhir "_3GjDE" mewakili cincangan yang dijana secara rawak, memastikan bahawa nama kelas adalah unik dalam komponen.

Pendekatan Alternatif: Konvensyen Penamaan Berasaskan Kelas
Jika anda lebih suka mengelakkan pemalam luaran, anda boleh menggunakan konvensyen penamaan berasaskan kelas untuk komponen dan elemen. Dengan menggunakan nama kelas yang unik untuk setiap elemen, anda boleh mengekalkan pengasingan komponen.

Kod Contoh

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

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