Fortsetzung des Studiums der Gestaltung mit CSS-Modulen in React

Setzen wir die Arbeit an unserer Anwendung buttons fort. Jetzt kümmern wir uns um die Hauptkomponente App, die bereits initial im Ordner src generiert wurde. In ihr werden wir zwei Divs, eine Überschrift und einen Button haben.

Wir benennen die Datei App.css in App.module.css um, gemäß der Konvention, löschen ihren Inhalt und erstellen darin mehrere Klassen mit CSS-Stilen für die Tags:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Und jetzt löschen wir den Inhalt der Datei App.js. Dann importieren wir die React Komponente Buttons und die Stile aus App.module.css. Wir schreiben unsere Tags und wenden die Stile auf sie an, sowie platzieren die React Komponente Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Wir verwendeten das Wort classes für den Namen des Objekts, das die Stile enthält, das wir aus App.module.css importieren. Wie im vorherigen Fall können Sie dieses Objekt benennen, wie es für Sie bequem ist.

Es bleiben noch ein paar kleine Schritte. Wir ändern den Namen der Datei index.css gemäß der Konvention in index.module.css und in der Datei index.js vergessen wir nicht, die Import-Zeile zu ersetzen:

import "./index.css";

Durch die Zeile:

import "./index.module.css";

Jetzt können wir im Browser das Ergebnis unserer Anwendung sehen.

Wenn Sie das generierte Markup im Entwicklerbereich des Browsers öffnen, werden Sie sehen, dass für jede Komponente eigene eindeutige Klassen generiert wurden. So müssen wir uns keine Sorgen mehr über Konflikte zwischen den Klassen einzelner Komponenten machen.

Wichtig ist auch, dass CSS-Module den Import normaler externer CSS-Dateien nicht verbieten.

Folgen Sie der Theorie aus der Lektion, löschen Sie die React Komponente App Ihrer Anwendung inputs, die Sie in den Aufgaben zur letzten Lektion erstellt haben, und platzieren Sie darin Ihre erstellte Inputs Komponente in einem gestalteten Div. Fügen Sie in App eine gestaltete Überschrift hinzu. All dies platzieren Sie in einem weiteren Div. Schreiben Sie die Stile für die Tags der React-Komponente App in App.modules.css.

Setzen Sie alles zusammen, schließen Sie die verbleibenden Dateien korrekt an und starten Sie Ihre Anwendung inputs.