1
resposta

Problemas rodando essa parte do projeto com typescript

Opa, estou com um certo problema.

Contextualizando: estou dando iniciativa no projeto com TypeScript e queria saber como resolver o seguinte problema:

warning: Prop `style` did not match. Server: "color: red; --darkreader-inline-color:#ff1a1a;" Client: "color:red"

O component link está assim:

import React from 'react';
import NextLink from 'next/link';
import LinkEstilizado from './LinkEstilizado';

interface IProps {
  children: string,
  href: string,
}

function Link({ children, href, ...props }: IProps) {

  return (
    <NextLink href={href}>
      <LinkEstilizado {...props}>{children}</LinkEstilizado>
    </NextLink>
  );
}

export default Link;

e o component 'Link Estilizado', está assim:

import React from 'react';
import { LinkProps } from 'next/link';

type IProps = LinkProps & {
  children?: string,
  href: string,
  onClick?: React.MouseEventHandler<HTMLAnchorElement>
}


const LinkEstilizado = React.forwardRef<HTMLAnchorElement>(({ onClick, href, children }: IProps, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref} style={{ color: 'red' }}>
      {children}
    </a>
  );
});

export default LinkEstilizado;

No caso eu mudei os tipos das props de Link para any, mas o erro pesistiu.

Ser alguém poder me ajuda, aparentemente é algo referente sobre as props passadas para o component ' link estilizado ' mas não encontrei nenhuma solução.

1 resposta

Oi Vitor, tudo certo?

Peço desculpas pela demora em obter um retorno.

Notei que você já finalizou o curso em questão, conseguiu contornar o problema? Caso tenha conseguido, que ótimo! Considere compartilhar com o fórum a solução, dessa forma estará ajudando outros alunos que podem se deparar com a mesma situação.

Fico à disposição.

Desejo um bom dia e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software