Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Minha solução está correta?

Fiz o componente utilizando apenas o componente estilizado input, sem a div para ser usado como container como o professor fez:

import styled from "styled-components";

const CampoTextoEstilizado = styled.input`
  height: 56px;
  box-sizing: border-box;
  padding: 12px 16px;
  width: 602px;
  border: 2px solid #c98cf1;
  border-radius: 10px;
  background: transparent url("/imagens/search.png") no-repeat right;
  color: #d9d9d9;
  outline: none;
  &::placeholder {
    color: #d9d9d9;
  }
`;

const CampoTexto = () => {
  return (
    <CampoTextoEstilizado type="search" placeholder="O que você procura?" />
  );
};

export default CampoTexto;

Como optei por colocar o ícone de lupa como imagem no background do imput, acredito que não seja necessária a utilização da div. Queria saber se não englobar o componente em uma div trará alguma consequência futura ao design do projeto.

1 resposta
solução!

Olá, Dara! Tudo bem?

Na minha opinião, não há nenhum problema em não utilizar a div como container nesse caso específico. O importante é que o resultado final esteja de acordo com o que foi proposto no exercício, ou seja, que o campo de pesquisa fique estilizado corretamente.

No entanto, é importante lembrar que a utilização da div como container pode ser útil em outros casos, principalmente quando você precisa agrupar vários elementos ou aplicar estilos a um conjunto de componentes. Portanto, é sempre bom ter essa opção em mente.

Espero ter ajudado e bons estudos!