The easiest way as styled-components docs said:

import styled from 'styled-components';
import Header from './Header';

const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor

Here's a comprehensive approach using Styled Components v5 with React Native that will work with plain React as well. If you're not using a theme you can skip to the StyledProps section at the bottom.

• Define your theme type.

  // MyTheme.ts
  
  export type MyTheme = {
    colors: {
      primary: string;
      background: string;
    };
  };
  

• Use the type on your themes.

  // themes.ts
  
  export const LightTheme: MyTheme = {
    colors: {
      primary: 'white',
      background: 'white',
    },
  };
  
  export const DarkTheme: MyTheme = {
    colors: {
      primary: 'grey',
      background: 'black',
    },
  };
  

• Use declaration merging to "merge" the MyTheme type into Styled Components default theme.

  // styled.d.ts
  
  import 'styled-components';
  import { MyTheme } from '../src/themes/MyTheme';
  
  declare module 'styled-components' {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    export interface DefaultTheme extends MyTheme {}
  }
  

OK, cool. The theme prop is correctly typed.
What about the components themselves?

• Wrap your specific component props in the StyledProps type.

  import { StyledProps } from 'styled-components';
  import styled from 'styled-components/native';
  
  type MyViewProps = StyledProps<{
    backgroundColor?: string;
    isAlert?: boolean;
  }>;
  
  const MyView = styled.View(
    (props: MyViewProps) => `
      background-color: ${props.backgroundColor || props.theme.colors.background};
      color: ${props.isAlert ? red : props.theme.colors.primary}
    `,
  );
  

In this example both props.backgroundColor and props.theme.colors.background will auto-complete. When you update MyTheme type or the specific component type it should just work.

TypeScript is complaining because your Link component that comes from react-router requires you to specify a to prop. I am not sure what you are trying to achieve, but Link should already render as an <a /> tag.

If you are willing to render a link to, let's say, an external website, you probably don't want to use a styled(Link), but a styled.a.

If you worry about repeating your style for both the styled(Link) and styled.a, you'd probably want to write a reusable button style using the css helper function and include it in both of your styled components.

Unfortunately, I believe it is the only option for now, as I have been in a similar case, and tried using as={Link} on a styled.a and TypeScript complains about unrecognised props. I believe that the implementation of the polymorphic as prop on TypeScript is not fully functional so there might be a fix later on.