Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Desafio

Referente ao curso React: estilize componentes com Styled Components e manipule arquivos estáticos, no capítulo Componentes iniciais e fontes e atividade Desafio: input estilizado

por Matheus Alves Barroso
| 95.3k xp | 17 posts
Estagiário (a)

Gostaria de saber se está correto é o que pode ser melhorado:

obs: não coloquei font-family pois estou esperando o professor abordar o assunto de fontes

import styled from "styled-components";
import search from "./search.png";

const StyledSearch = styled.div`
  display: inline-flex;
  justify-content: space-between;
  width: 40rem;
  padding: 12px 16px;
  align-items: center;
  background:none;
  border:2px solid var(--Degrad-com-rosa, #C98CF1);
  border-radius: 10px;
  gap: auto;

  input {
    background: none;
    border: none;
    color: #FFF;
    font-family: Gandhi Sans;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; 

    &:focus {
      background: none;
      outline: none;
    }
    &::placeholder {
      color: #d9d9d9;
    }
  }

  img {
    max-width: 32px;
  }
`;

const TextBox = () => {
  return (
    <StyledSearch>
      <input type="text" placeholder="O que você procura?" />
      <img src={search} alt="buscar" />
    </StyledSearch>
  );
};

export default TextBox;
2 respostas
solução!
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá Matheus, como vai? Espero que esteja bem!

Você está indo muito bem! O uso do Styled Components está correto e a estruturação do seu componente TextBox também.

No entanto, percebi um pequeno detalhe que pode ser melhorado: a propriedade gap: auto; que você usou no seu StyledSearch. A propriedade gap é usada para criar espaço entre as linhas e colunas de um grid. Como você está usando display: inline-flex;, essa propriedade não terá efeito. Se você quer adicionar espaço entre o input e a imagem, você pode usar a propriedade margin no seu input ou na sua imagem.

Além disso, você mencionou que não adicionou a propriedade font-family porque está esperando o professor abordar o assunto de fontes. No entanto, notei que você usou font-family: Gandhi Sans; no seu input. Se você não tem essa fonte disponível no seu projeto, o navegador vai ignorar essa linha e usar a fonte padrão.

Aqui está um exemplo de como você pode adicionar a propriedade margin:

const StyledSearch = styled.div`
  // ...
  input {
    // ...
    margin-right: 10px; // adiciona um espaço à direita do input
  }
  // ...
`;

Espero ter ajudado!

Caso tenha dúvidas,fico à disposição.

Abraços e bons estudos!

por Estudante
| 105.6k xp | 121 posts

Desculpa, mas gap também funciona em flexbox não só em grid.

Segue documentação: https://www.w3schools.com/cssref/css3_pr_gap.php