Haaste: Käytä CSS-moduuleja Reactissa
Tehtävä: Käyttäjäkortin rakentaminen CSS-moduuleilla
Tässä tehtävässä suunnitellaan käyttäjäkortti, joka näyttää käyttäjän valokuvan ja olennaiset tiedot. Sovella sopivia tyylejä jokaiseen komponenttiin ja varmista niiden asianmukainen käyttö. Tavoitteena on saavuttaa seuraavanlainen käyttöliittymä:
Tehtävä:
- Tiedostossa
UserInfo.jsxtuo tyylitiedosto (UserInfo.module.css) ja määritä se nimellästyylien liittämistä varten. - Sovelluksen rakentamisen viimeistelemiseksi tuo
UserInfo.jsxtiedostoApp.jsx-tiedostoon.
- Tiedoston tuomiseen käytetään
import-lausetta ja määritetään lähdetiedosto. - CSS-tiedoston liittämiseksi s:ään, tuo se muodossa
import s from "path_to_the_file";. - Käyttääksesi UserInfo-komponenttia
App-komponentissa, käytä syntaksia</UserInfo />.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.17Haaste: Käytä CSS-moduuleja Reactissa
Pyyhkäise näyttääksesi valikon
Tehtävä: Käyttäjäkortin rakentaminen CSS-moduuleilla
Tässä tehtävässä suunnitellaan käyttäjäkortti, joka näyttää käyttäjän valokuvan ja olennaiset tiedot. Sovella sopivia tyylejä jokaiseen komponenttiin ja varmista niiden asianmukainen käyttö. Tavoitteena on saavuttaa seuraavanlainen käyttöliittymä:
Tehtävä:
- Tiedostossa
UserInfo.jsxtuo tyylitiedosto (UserInfo.module.css) ja määritä se nimellästyylien liittämistä varten. - Sovelluksen rakentamisen viimeistelemiseksi tuo
UserInfo.jsxtiedostoApp.jsx-tiedostoon.
- Tiedoston tuomiseen käytetään
import-lausetta ja määritetään lähdetiedosto. - CSS-tiedoston liittämiseksi s:ään, tuo se muodossa
import s from "path_to_the_file";. - Käyttääksesi UserInfo-komponenttia
App-komponentissa, käytä syntaksia</UserInfo />.
Kiitos palautteestasi!
