Wie kann ich komponentenbezogenes CSS in meiner React-Anwendung sicherstellen?

Komponentenbezogene CSS-Importe in React

Das Importieren von CSS in React-Komponenten ist für das Styling unerlässlich, aber die Sicherstellung komponentenbezogener Stile kann eine Herausforderung sein . In Ihrem Fall möchten Sie, dass CSS nur auf die Elemente innerhalb einer bestimmten Komponente angewendet wird und verschwindet, wenn die Komponente nicht gemountet wird.

Ein Ansatz besteht darin, CSS-Module zu verwenden, eine beliebte Technik, um in React ein komponentenbezogenes Styling zu erreichen . Bei CSS-Modulen sind die Klassennamen und Animationsnamen in der angegebenen CSS-Datei standardmäßig lokal gültig. Dadurch wird sichergestellt, dass die Stile nur auf die Elemente innerhalb der Komponente angewendet werden, die das Modul importiert hat.

Betrachten Sie dieses Beispiel:

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

Bei Verwendung eines CSS-Moduls wird das generierte CSS verwendet enthalten zufällig generierte Hash-Werte, um eindeutige Klassennamen für jede Komponente sicherzustellen. Dies verhindert Stilkonflikte zwischen Komponenten.

Ein alternativer Ansatz besteht darin, generische Selektoren zu vermeiden und eine klassenbasierte Benennungskonvention für Komponenten und Elemente zu übernehmen. Zum Beispiel:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

Indem Sie allen Elementen eindeutige Klassennamen zuweisen, können Sie Stilkonflikte verhindern, ohne auf CSS-Module angewiesen zu sein.

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