typed-styled-component-custom.tsx

import React from 'react';
import styled, { StyledComponentBase } from 'styled-components';

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

type ComponentWithStyleProps = {
  color: string;
} & ComponentProps;

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

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