type-script-forward-ref-example.tsx

type ComponentProps = { text: string } & React.HTMLAttributes<HTMLDivElement>;
type ComponentRef = HTMLDivElement;
const Component:React.FunctionComponent<ComponentProps> = React.forwardRef<ComponentRef, ComponentProps>(
  ({ text = 'default', className }, ref) => (
    <div className={className} ref={ref}>
      {text}
    </div>
  ),
);

type ComponentWithStyleProps = {
  color: string;
  ref: React.RefObject<HTMLDivElement> | null;
} & ComponentProps

type ComponentWithStyleType = StyledComponent<
  React.FunctionComponent<ComponentProps>,
  any,
  ComponentWithStyleProps,
  never
>;

export const ComponentWithStyle:ComponentWithStyleType = styled(Component)<ComponentWithStyleProps>`
  border: 10px solid ${({ color }) => color};
`;

() => {
  const ref = React.useRef<HTMLDivElement>(null)
  return <ComponentWithStyle text='foo' color="red" ref={ref} />
}