Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] O formulário não diminuiu nas laterais.

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Uma biblioteca declarativa e atividade Criando o formulário

por Douglas Alex Rocha Dezidério
| 71.4k xp | 17 posts
Suporte de TI

Na aula o formulário acaba diminuindo nas laterais. Contudo, mesmo eu replicando o código, meu formulário continua no tamanho original.

O index.js

import CampoTexto from '../CampoTexto'
import './Formulario.css'

export const Formulario = () => {
    return (
        <section className="fomulario">
            <form>
                <h2>Preencha dos dados para criar o card do colaborador</h2>
                <CampoTexto label="Nome" placeholder="Digite seu nome" />
                <CampoTexto label="Cargo" placeholder="Digite seu cargo" />
                <CampoTexto label="Imagem" placeholder="Digite sua imagem" />
            </form>
        </section>
    )
}

export default Formulario

O Formulario.css

.formulario {
    display: flex;
    justify-content: center;
    margin: 80px 0;
}

.formulario form {
    max-width: 80%;
    background-color: #F2F2F2;
    border-radius: 20px;
    padding: 36px 64px;
    box-shadow: 8px 8px 16px rgba(0, 0 ,0, 0.08);
}
2 respostas
solução!
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá, Douglas! Parece que você está fazendo um ótimo trabalho seguindo o curso, parabéns!

Pelo que pude perceber, você tem um pequeno erro de digitação no seu código que pode estar causando o problema. No seu código, você nomeou a classe CSS como "fomulario", mas o correto seria "formulario", conforme mostrado no código apresentado na aula.

Então, a correção seria simplesmente ajustar a digitação no seu código. Aqui está o código corrigido:

import CampoTexto from '../CampoTexto'
import './Formulario.css'

export const Formulario = () => {
    return (
        <section className="formulario">
            <form>
                <h2>Preencha dos dados para criar o card do colaborador</h2>
                <CampoTexto label="Nome" placeholder="Digite seu nome" />
                <CampoTexto label="Cargo" placeholder="Digite seu cargo" />
                <CampoTexto label="Imagem" placeholder="Digite sua imagem" />
            </form>
        </section>
    )
}

export default Formulario

Note que a única mudança foi na linha 5, onde corrigimos "fomulario" para "formulario". Com isso, o seu formulário deve agora diminuir nas laterais como esperado.

Espero ter ajudado e bons estudos!

por Douglas Alex Rocha Dezidério
| 71.4k xp | 17 posts
Suporte de TI

É verdade. Obrigado!