[Bug] Erro no Input | React: comece seu projeto full stack

[Bug] Erro no Input

Olá pessoal, no meu código está dando erro no input onde diz que está indefinido.

código:

import styled from "styled-components";

const Input = styled.input` order: 1px solid #FFF; background: transparent; border: 1px solid #FFF; padding: 20px 140px; border-radius: 50px; width: 200px; color: #FFF; font-size: 16px; margin-bottom: 10px;

    &::placeholder {
            color: #FFF;
            font-size: 16px;
    }

export default Input

erro:

src\componentes\input\index.js Line 3:7: 'input' is assigned a value but never used no-unused-vars

ERROR in [eslint] src\componentes\input\index.js Line 20:16: 'Input' is not defined no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error and 1 warning

Olá, Julia.

Tudo bem?

O erro que você está vendo é porque o JavaScript é case-sensitive (sensível a maiúsculas e minúsculas), e você importou 'styled' de 'styled-components' como 'input', que é diferente de 'Input'.

O erro 'no-unused-vars' está ocorrendo porque você importou 'input' mas nunca o usou no seu código. E o erro 'no-undef' está ocorrendo porque você está tentando exportar 'Input', mas ele não foi definido no seu código.

Para resolver isso, você precisa alterar a importação para 'Input' em vez de 'input'. Seu código corrigido ficaria assim:

import styled from "styled-components";

const Input = styled.Input`
        border: 1px solid #FFF;
        background: transparent;
        border: 1px solid #FFF;
        padding: 20px 140px;
        border-radius: 50px;
        width: 200px;
        color: #FFF;
        font-size: 16px;
        margin-bottom: 10px;

        &::placeholder {
                color: #FFF;
                font-size: 16px;
        }
`

export default Input

Olha os seus componentes e veja se não tem diferença nos nomes entre maiúsculas e minúsculas na hora de importar e exportar.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.