Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Använd CSS-moduler i React | Stilmönster i React-Applikationer
Quizzes & Challenges
Quizzes
Challenges
/
Introduktion till React

bookUtmaning: Använd CSS-moduler i React

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:

  1. I filen UserInfo.jsx, importera stilfilen (UserInfo.module.css) och tilldela den som s för stilkoppling.
  2. För att slutföra appen, importera filen UserInfo.jsx i App.jsx.
  1. För att importera en fil, använd import-satsen och ange källfilen.
  2. För att koppla CSS-filen till s, importera den med import s from "path_to_the_file";.
  3. För att använda UserInfo-komponenten i App-komponenten, använd syntaxen </UserInfo />.
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10

Fråga AI

expand

Fråga AI

ChatGPT

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

bookUtmaning: Använd CSS-moduler i React

Svep för att visa menyn

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:

  1. I filen UserInfo.jsx, importera stilfilen (UserInfo.module.css) och tilldela den som s för stilkoppling.
  2. För att slutföra appen, importera filen UserInfo.jsx i App.jsx.
  1. För att importera en fil, använd import-satsen och ange källfilen.
  2. För att koppla CSS-filen till s, importera den med import s from "path_to_the_file";.
  3. För att använda UserInfo-komponenten i App-komponenten, använd syntaxen </UserInfo />.
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10
some-alt