React styled-component with Typescript, types error

Question

I have a demo here

This app is styling a react Link component.

I have a isActive prop on the Link Styled component.

The console complains about this because it dose not recognize isActive as a prop on the a DOM element

The Documentation says the way round this is to

import { Link as ReactRouterDonLink } from 'react-router-dom';

and then

const Link = ({isActive, children, ...props}) => {
  return(
    <ReactRouterDonLink {...props}>
      {children}
    </ReactRouterDonLink>
  )
}

const StyledLink = styled(Link)`
  color: blue;
  font-size: 40px;
  font-family: sans-serif;
  text-decoration: none;
  font-weight: ${p => p.isActive ? 'bold': 'normal'};
`;

ReactRouterDonLink is erroring saying

Property 'to' is missing in type '{ children: any; }' but required in type 'LinkProps<any>'

because the React Link element needs a to

How can I add an interface to ReactRouterDonLink to include to

Answer 1

It's not styled-components that's the issue here. You need to explicitly pass the "to" prop down to the ReactRouterDonLink component:

const Link = ({
  isActive,
  children,
  className,
  to
}: {
  isActive: boolean;
  children: ReactNode;
  className: string;
  to: string;
}) => {
  return <ReactRouterDonLink to={to} className={className}>{children}</ReactRouterDonLink>;
};

Alternatively, you could type your props object:

const Link = (props: {
  isActive: boolean;
  children: ReactNode;
  to: string;
  className: string;
}) => {
  return <ReactRouterDonLink to={props.to} className={props.className}>{props.children}</ReactRouterDonLink>;
};