Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Estilize uma Aplicação React | Estilizando Aplicações React
Introdução ao React

bookDesafio: 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 é:

  1. Criar o componente Alert que possui o elemento div em seu interior.
  2. O elemento div deve ter o nome de classe alert.
  3. O elemento div deve ter a propriedade children como conteúdo.
  4. O elemento div deve ter o seguinte CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
  1. Para criar um elemento div no componente, utilize <div>...</div>.
  2. Para passar props.children como conteúdo de texto, envolva-o em {...} e defina props.children. Resultado: <div>{props.children}</div>.
  3. Para adicionar um nome de classe ao elemento div, utilize o atributo className e defina como alert. Resultado: className="alert".
  4. Para importar o arquivo com estilos no arquivo index.js, utilize a declaração import e forneça o caminho correto para o arquivo. Resultado: import './index.css'.
  5. Para aplicar estilos ao elemento div, utilize o seletor de nome de classe .alert e insira os estilos da tarefa.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 4

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

bookDesafio: 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 é:

  1. Criar o componente Alert que possui o elemento div em seu interior.
  2. O elemento div deve ter o nome de classe alert.
  3. O elemento div deve ter a propriedade children como conteúdo.
  4. O elemento div deve ter o seguinte CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
  1. Para criar um elemento div no componente, utilize <div>...</div>.
  2. Para passar props.children como conteúdo de texto, envolva-o em {...} e defina props.children. Resultado: <div>{props.children}</div>.
  3. Para adicionar um nome de classe ao elemento div, utilize o atributo className e defina como alert. Resultado: className="alert".
  4. Para importar o arquivo com estilos no arquivo index.js, utilize a declaração import e forneça o caminho correto para o arquivo. Resultado: import './index.css'.
  5. Para aplicar estilos ao elemento div, utilize o seletor de nome de classe .alert e insira os estilos da tarefa.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 4
some-alt