Black November

ATÉ 50% OFF

TÁ ACABANDO!

0 dias

0 horas

0 min

0 seg

3
respostas

falha na importação

Não estou conseguindo aplicar o estilo importando, alguem poderia me ajudar?
Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
3 respostas

Consegue compartilhar o repositório no Github, Gabriel?

Salve, Gabriel!

Obrigado por compartilhar.

Achei o problema, ele tá no no seu App.jsx.

Ao invés de importar os componentes, você estava recriando todos eles. Atualmente tá assim:

import './App.css'

function TituloFormulario({children}){
  return(
      <h2>
        {children}
      </h2>
  )
}

function CampoDeFormulario({children}){
  return(
    <fieldset>
      {children}
    </fieldset>
  )
}

function Label({children, htmlFor}){
  return(
    <label htmlFor={htmlFor}>
      {children}
    </label>
  )
}

function CampoDeEntrada(props){

  return <input{...props} />

}

function FormularioDeEvento(){

  return (
    <form className="form-evento">
      <TituloFormulario>
          Preencha para criar um evento:
      </TituloFormulario>
      <CampoDeFormulario>
        <Label htmlFor="nome">
          Qual o nome do evento?
        </Label>
        <CampoDeEntrada 
        type="text" 
        id="nome"
        placeholder='Summer dev hits'
        />
      </CampoDeFormulario>
    </form>
  )
}

function App() {
  return (
    <main>
      <header>
        <img src="/logo.png" alt=""/>
      </header>
      <section>
        <img src="/banner.png" alt=""/>
      </section>
      <FormularioDeEvento />
    </main>
  )
}

export default App

Se você mudar para:

import './App.css'
import { FormularioDeEvento } from './components/FormularioDeEvento'

function App() {
  return (
    <main>
      <header>
        <img src="/logo.png" alt=""/>
      </header>
      <section>
        <img src="/banner.png" alt=""/>
      </section>
      <FormularioDeEvento />
    </main>
  )
}

export default App

Você vai ver os estilos aplicados.

Bons estudos!

PS.: você compartilhou seu código de uma forma não muito convencional. vale a pena depois subir o projeto pro github ao invés do .rar :)