Typescript/React: Erro | Front-end | Alura - Cursos online de tecnologia

Typescript/React: Erro

Estou recebendo esse erro ao chamar um styled component na função de retorno quando tento passar uma prop diretamente pra um atributo html. Eu consigo resolver o problema caso eu declare um valor vazio antes, mas não me parece a forma correta de se fazer.

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

Aqui eu tenho que declarar o valor de $placeholder, e depois passar ele pro atributo de fato, pois se eu remover a declaração do $placeholder, ele acusa o erro de "No overload matches this call.". Mesmo com o erro ele funciona e o valor do placeholder é recebido ao criar o componente, mas certamente não deveria ser assim. Já tentei declarar um valor default nas props pra reduzir a duplicação, mas não funcionou

Alguém sabe dizer o porque isso acontece? Esse é meu primeiro projeto com React e Typescript então talvez esteja errando algo na sintaxe ou na tipagem.

Oi, tudo belezinha?

O TypeScript tá meio perdido com os tipos das props que tu tá mandando pro teu componente estilizado.

Pensei nessa forma pra ajustar

// Interface
interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
  $color: string;
  $placeholder: string;
  $type: string;
}

// Style
const StyledInput = styled.input<InputProps>`
  background: none;
  color: ${p => p.$color};
  width: 100%;

  // Tirar as props customizadas antes de jogar no HTML
  &&& {
    ${(props) => `
      placeholder: ${props.$placeholder};
      type: ${props.$type};
    `}
  }
`

// Return
const Input = ({ $color, $placeholder, $type, ...rest }: InputProps) => (
  <StyledInput
    $color={$color}
    // As props custom vão pro estilo ali em cima
    {...rest} // e o resto das props que são padrão do input vão direto pro HTML
  />
)

// Export
export default Input;

Usei aquele ...rest pra pegar todas as outras props que não são $color, $placeholder e $type e mandei direto pro StyledInput. Acaba facilitando, né? Tu pode usar as props padrão do input HTML sem precisar ficar listando todas elas.

E pra evitar o erro chato, no bloco de estilos, usei aquele &&& pra jogar as propriedades custom direto no CSS. Assim, não vai dar bobeira de elas irem pro HTML e causar o erro que tu tá vendo.

Abs.