Herausforderung: Verwendung von CSS-Modulen in React
Aufgabe: Erstellung einer Benutzerkarte mit CSS-Modules
In dieser Aufgabe wird eine Benutzerkarte gestaltet, die das Foto des Benutzers sowie relevante Informationen anzeigt. Es sollen passende Stile auf jede Komponente angewendet und deren korrekte Nutzung sichergestellt werden. Ziel ist es, folgende Benutzeroberfläche zu erreichen:
Die Aufgabe lautet:
- In der Datei
UserInfo.jsx
die Styles-Datei (UserInfo.module.css
) importieren und alss
für die Stilzuweisung verwenden. - Um den Aufbau der App abzuschließen, die Datei
UserInfo.jsx
in dieApp.jsx
importieren.
- Zum Importieren einer Datei die Anweisung
import
verwenden und die Quelldatei angeben. - Um die CSS-Datei mit den s zu verknüpfen, diese mit
import s from "path_to_the_file";
importieren. - Zur Verwendung der UserInfo Komponente innerhalb der
App
Komponente die Syntax</UserInfo />
anwenden.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.17
Herausforderung: Verwendung von CSS-Modulen in React
Swipe um das Menü anzuzeigen
Aufgabe: Erstellung einer Benutzerkarte mit CSS-Modules
In dieser Aufgabe wird eine Benutzerkarte gestaltet, die das Foto des Benutzers sowie relevante Informationen anzeigt. Es sollen passende Stile auf jede Komponente angewendet und deren korrekte Nutzung sichergestellt werden. Ziel ist es, folgende Benutzeroberfläche zu erreichen:
Die Aufgabe lautet:
- In der Datei
UserInfo.jsx
die Styles-Datei (UserInfo.module.css
) importieren und alss
für die Stilzuweisung verwenden. - Um den Aufbau der App abzuschließen, die Datei
UserInfo.jsx
in dieApp.jsx
importieren.
- Zum Importieren einer Datei die Anweisung
import
verwenden und die Quelldatei angeben. - Um die CSS-Datei mit den s zu verknüpfen, diese mit
import s from "path_to_the_file";
importieren. - Zur Verwendung der UserInfo Komponente innerhalb der
App
Komponente die Syntax</UserInfo />
anwenden.
Danke für Ihr Feedback!