Aprenda Desafio: Uso de Módulos CSS no React | Técnicas de Estilização em Aplicações React

Tarefa: Construção de um Cartão de Usuário com CSS Modules

Nesta tarefa, será desenvolvido um cartão de usuário exibindo a foto e informações relevantes do usuário. Aplicar estilos apropriados a cada componente e garantir sua correta utilização. O objetivo é alcançar a seguinte interface:

A tarefa é:

No arquivo UserInfo.jsx, importar o arquivo de estilos (UserInfo.module.css) e atribuí-lo como s para associação de estilos.
Para finalizar a construção do aplicativo, importar o arquivo UserInfo.jsx no App.jsx.

Para importar um arquivo, utilize a declaração import e especifique o arquivo de origem.
Para associar o arquivo CSS ao s, importe utilizando import s from "path_to_the_file";.
Para utilizar o componente UserInfo dentro do componente App, utilize a sintaxe </UserInfo />.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 10

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

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

Deslize para mostrar o menu

Tarefa: Construção de um Cartão de Usuário com CSS Modules

A tarefa é:

No arquivo UserInfo.jsx, importar o arquivo de estilos (UserInfo.module.css) e atribuí-lo como s para associação de estilos.
Para finalizar a construção do aplicativo, importar o arquivo UserInfo.jsx no App.jsx.

Para importar um arquivo, utilize a declaração import e especifique o arquivo de origem.
Para associar o arquivo CSS ao s, importe utilizando import s from "path_to_the_file";.
Para utilizar o componente UserInfo dentro do componente App, utilize a sintaxe </UserInfo />.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 10