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.