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?

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