Einstieg in die Gestaltung mit CSS-Modulen in React

In dieser und den folgenden Lektionen werden wir einen weiteren modernen und effektiven Ansatz zur Gestaltung von React Komponenten betrachten - die Verwendung von CSS-Modulen.

CSS-Module in diesem Ansatz sind separate kompilierte CSS-Dateien, in denen Klassennamen und Animationen sich im lokalen Gültigkeitsbereich befinden, was Konflikte zwischen Klassennamen aus verschiedenen Komponenten vermeidet.

Zum Anfang erstellen wir unsere einfache React-Anwendung buttons und starten sie. Dazu erstellen wir einen leeren Ordner test, gehen hinein und schreiben im Terminal die folgenden Befehle:

npx create-react-app buttons
cd buttons
npm start

Wenn Sie eine frische React-Version haben, das heißt, sie unterstützt Create React App v2 und höher, dann müssen keine zusätzlichen Einstellungen vorgenommen werden, da in diesem Fall CSS-Module automatisch unterstützt werden. Zur Überprüfung schauen Sie in package.json, wenn die Abhängigkeit react-scripts die Version 2.x.x oder höher ist, ist alles in Ordnung. Andernfalls aktualisieren Sie Ihr React.

Unsere Anwendung zur Gestaltung mit der Methode der CSS-Module wird drei Buttons enthalten.

Wir werden CSS-Dateien unter Einhaltung der Konvention wie folgt benennen: [name].module.css.

Lassen Sie uns jetzt den Ordner components in src erstellen, und darin die Datei Buttons.module.css mit CSS-Stilen für unsere Buttons hinzufügen:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Erstellen Sie auch im Ordner components die leere Datei der React-Komponente Buttons.js, berühren Sie vorerst nicht die generierte Datei App.js, wir werden uns später darum kümmern!

Importieren Sie in Buttons.js unbedingt die Datei mit den CSS-Stilen und wenden Sie diese Stile auch auf jeden Button mit dem Attribut class an:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Übrigens ist es nicht zwingend erforderlich, das Wort styles für den Namen des importierten Objekts mit Stilen zu verwenden, Sie können es benennen, wie es für Sie bequem ist.

In der nächsten Lektion werden wir unsere Anwendung abschließen.

Folgen Sie der Theorie zu dieser Lektion und generieren Sie die React-Anwendung inputs.

Verwenden Sie den im Unterricht gezeigten CSS-Module-Ansatz. Erstellen Sie in src der Anwendung inputs die Datei Inputs.js für die React Komponente Inputs, die drei Inputs enthalten wird. Schreiben Sie ein paar Stile in Inputs.modules.css für die Inputs. Importieren Sie diese Datei in Inputs.js und wenden Sie die Stile an.