Lära Utmaning: Använd CSS-moduler i React | Stilmönster i React-Applikationer

Uppgift: Bygg ett användarkort med CSS-moduler

I denna uppgift ska du utforma ett användarkort som visar användarens foto och relevant information. Tillämpa lämpliga stilar på varje komponent och säkerställ korrekt användning. Målet är att uppnå följande gränssnitt:

Uppgiften är:

I filen UserInfo.jsx, importera stilfilen (UserInfo.module.css) och tilldela den som s för stilkoppling.
För att slutföra appen, importera filen UserInfo.jsx i App.jsx.

För att importera en fil, använd import-satsen och ange källfilen.
För att koppla CSS-filen till s, importera den med import s from "path_to_the_file";.
För att använda UserInfo-komponenten i App-komponenten, använd syntaxen </UserInfo />.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

How do I import the CSS module in UserInfo.jsx?

Can you explain how to use the UserInfo component in App.jsx?

What should the folder structure look like for these files?

Awesome!

Completion rate improved to 2.17

Svep för att visa menyn

Uppgift: Bygg ett användarkort med CSS-moduler

Uppgiften är:

I filen UserInfo.jsx, importera stilfilen (UserInfo.module.css) och tilldela den som s för stilkoppling.
För att slutföra appen, importera filen UserInfo.jsx i App.jsx.

För att importera en fil, använd import-satsen och ange källfilen.
För att koppla CSS-filen till s, importera den med import s from "path_to_the_file";.
För att använda UserInfo-komponenten i App-komponenten, använd syntaxen </UserInfo />.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10