Défi : Modules CSS
Tâche : Construire une Carte Utilisateur avec des Modules CSS
Dans cette tâche, vous allez concevoir une carte utilisateur affichant la photo de l'utilisateur et les informations pertinentes. Appliquez des styles appropriés à chaque composant et assurez-vous de leur bonne utilisation. Notre objectif est d'atteindre cette interface utilisateur :
La tâche est :
- Dans le fichier
UserInfo.jsx
, importez le fichier de styles (UserInfo.module.css
) et assignez-le commes
pour l'association de style. - Pour compléter la construction de l'application, importez le fichier
UserInfo.jsx
dans leApp.jsx
.
- Pour importer un fichier, utilisez l'instruction
import
et spécifiez le fichier source. - Pour associer le fichier CSS avec les s, importez-le en utilisant
import s from "path_to_the_file";
. - Pour utiliser le composant UserInfo dans le composant
App
, utilisez la syntaxe</UserInfo />
.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.17
Défi : Modules CSS
Glissez pour afficher le menu
Tâche : Construire une Carte Utilisateur avec des Modules CSS
Dans cette tâche, vous allez concevoir une carte utilisateur affichant la photo de l'utilisateur et les informations pertinentes. Appliquez des styles appropriés à chaque composant et assurez-vous de leur bonne utilisation. Notre objectif est d'atteindre cette interface utilisateur :
La tâche est :
- Dans le fichier
UserInfo.jsx
, importez le fichier de styles (UserInfo.module.css
) et assignez-le commes
pour l'association de style. - Pour compléter la construction de l'application, importez le fichier
UserInfo.jsx
dans leApp.jsx
.
- Pour importer un fichier, utilisez l'instruction
import
et spécifiez le fichier source. - Pour associer le fichier CSS avec les s, importez-le en utilisant
import s from "path_to_the_file";
. - Pour utiliser le composant UserInfo dans le composant
App
, utilisez la syntaxe</UserInfo />
.
Merci pour vos commentaires !