Desafio: Estilize uma Aplicação React
Tarefa
Agora iremos criar o componente Alert, que irá renderizar todos os elementos passados como filhos e aplicar alguns estilos específicos. A tarefa é:
- Criar o componente
Alertque possui o elementodivem seu interior. - O elemento
divdeve ter o nome de classealert. - O elemento
divdeve ter a propriedadechildrencomo conteúdo. - O elemento
divdeve ter o seguinte CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
- Para criar um elemento
divno componente, utilize<div>...</div>. - Para passar
props.childrencomo conteúdo de texto, envolva-o em{...}e definaprops.children. Resultado:<div>{props.children}</div>. - Para adicionar um nome de classe ao elemento
div, utilize o atributoclassNamee defina comoalert. Resultado:className="alert". - Para importar o arquivo com estilos no arquivo
index.js, utilize a declaraçãoimporte forneça o caminho correto para o arquivo. Resultado:import './index.css'. - Para aplicar estilos ao elemento
div, utilize o seletor de nome de classe.alerte insira os estilos da tarefa.
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 4
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Incrível!
Completion taxa melhorada para 4
Desafio: Estilize uma Aplicação React
Deslize para mostrar o menu
Tarefa
Agora iremos criar o componente Alert, que irá renderizar todos os elementos passados como filhos e aplicar alguns estilos específicos. A tarefa é:
- Criar o componente
Alertque possui o elementodivem seu interior. - O elemento
divdeve ter o nome de classealert. - O elemento
divdeve ter a propriedadechildrencomo conteúdo. - O elemento
divdeve ter o seguinte CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
- Para criar um elemento
divno componente, utilize<div>...</div>. - Para passar
props.childrencomo conteúdo de texto, envolva-o em{...}e definaprops.children. Resultado:<div>{props.children}</div>. - Para adicionar um nome de classe ao elemento
div, utilize o atributoclassNamee defina comoalert. Resultado:className="alert". - Para importar o arquivo com estilos no arquivo
index.js, utilize a declaraçãoimporte forneça o caminho correto para o arquivo. Resultado:import './index.css'. - Para aplicar estilos ao elemento
div, utilize o seletor de nome de classe.alerte insira os estilos da tarefa.
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 4