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.