1
resposta

problema com o input

Boa noite,

o campo do meu input está diferente, o meu está com uma cor branca no fundo, como deixo igual o do instrutor?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

index.jsx/Cabecalho
import logo from './logo.png'
import search from './search.png'
import styles from './Cabecalho.module.scss';

export default function Cabecalho(){
    return(
        <header className= {styles.cabecalho}>
            <img src={logo} alt="Logo Alura Space" />
            <div className={styles.cabecalho__container}>
                <input className={styles.Cabecalho__input}
                type='text'
                placeholder="o que você procura?"/>
                <img src={search} alt="Ícone de lupa" />
            </div>
        </header>
    )
}

cabecalho.module.scss/Cabecalho
import logo from './logo.png'
import search from './search.png'
import styles from './Cabecalho.module.scss';

export default function Cabecalho(){
    return(
        <header className= {styles.cabecalho}>
            <img src={logo} alt="Logo Alura Space" />
            <div className={styles.cabecalho__container}>
                <input className={styles.Cabecalho__input}
                type='text'
                placeholder="o que você procura?"/>
                <img src={search} alt="Ícone de lupa" />
            </div>
        </header>
    )
}
1 resposta

Olá, Anatalia! Tudo bem?

O erro está no nome da classe do input no HTML, você colocou a palavra "cabecalho" com a primeira letra "c" em maiúscula, está assim: styles.Cabecalho__input no caso seria assim styles.cabecalho__input com "c" minúsculo, se você copiou o código CSS da aula certinho, basta corrigir isso e pronto, como o nome da classe está errado, não está aplicando o "background: transparent" ai ele fica com fundo branco.

CORRIGIDO FICA:

<input className={styles.cabecalho__input}
                type='text'
                placeholder="o que você procura?"/>

Espero ter ajudado! Bons estudos!