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. Aplique estilos apropriados a cada componente e garanta sua correta utilização. O objetivo é alcançar a seguinte interface:

A tarefa é:

No arquivo UserInfo.jsx, importe o arquivo de estilos (UserInfo.module.css) e atribua-o como s para associação de estilos.
Para finalizar a construção do aplicativo, importe 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 aos s, importe-o 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 imported styles in the component?

How do I import and use the UserInfo component in App.jsx?

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, importe o arquivo de estilos (UserInfo.module.css) e atribua-o como s para associação de estilos.
Para finalizar a construção do aplicativo, importe 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 aos s, importe-o 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