Wie kann ich komponentenbezogene CSS-Importe in React erreichen?

Komponentenbezogene CSS-Importe in React

Einführung
Viele React-Anwendungen stehen vor Herausforderungen bei der Verwaltung von CSS-Stilen, insbesondere beim Umgang mit mehreren Komponenten. Um eine ordnungsgemäße Isolierung sicherzustellen und globale Stile zu vermeiden, möchten Sie möglicherweise komponentenbezogene CSS-Importe implementieren.

CSS-Module
Ein beliebter Ansatz, um komponentenbezogene CSS-Importe zu erreichen, ist CSS Module. Mit CSS-Modulen werden Klassennamen und Animationsnamen automatisch innerhalb der Komponente festgelegt, in die die CSS-Datei importiert wird. URLs und Importe halten sich auch an die Modulanforderungssyntax und stellen so sicher, dass Stile innerhalb der Komponente isoliert sind.

Beispielcode
Stellen Sie sich eine React-Komponente und das zugehörige CSS vor Datei:

Komponente

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;
}

Post-CSS-Transformation
Nachdem CSS Modules seine Transformation durchgeführt hat, sieht die CSS-Ausgabe so aus wie:

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

Das Suffix „_3GjDE“ stellt einen zufällig generierten Hash dar, der sicherstellt, dass Klassennamen innerhalb der Komponente eindeutig sind.

Alternativer Ansatz: Klassenbasierte Namenskonvention
Wenn Sie externe Plugins lieber vermeiden möchten, können Sie eine klassenbasierte Namenskonvention für Komponenten und Elemente übernehmen. Durch die Verwendung eindeutiger Klassennamen für jedes Element können Sie die Komponentenisolation aufrechterhalten.

Beispielcode

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

Das obige ist der detaillierte Inhalt vonWie kann ich komponentenbezogene CSS-Importe in React erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!