What should be the type of props when styling another Styled Component?

Question

I am using styled components along with typescript in my NextJS project. I have styled a div element as following:

export const ClippedOverlay = styled(
  (
    props: React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLDivElement>,
      HTMLDivElement
    >
  ) => <div {...props} />
)`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
`;

Then, I style this ClippedOverlay component to make further two components. The code is as following:

export const ClippedOverlayBoy = styled(
  (
    props: React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLDivElement>,
      HTMLDivElement
    >
  ) => <ClippedOverlay {...props} />
)`
  width: 56.6vw;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 77% 100%, 0 100%);
`;

export const ClippedOverlayGirl = styled(
  (
    props: React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLDivElement>,
      HTMLDivElement
    >
  ) => <ClippedOverlay {...props} />
)`
  width: 100%;
  z-index: 1;
`;

However, in both ClippedOverlayBoy and ClippedOverlayGirl styled components, I see a typescript error on the usage of ClippedOverlay styled component.

The error is shown in the following iamge: Image showing typescript error in IDE

I do not know what am I doing wrong. Can you please point out the error? Thank you.

Answer 1

this will work

export const ClippedOverlay = styled(
  (
    props: React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLDivElement>,
      HTMLDivElement
    >
  ) => <div {...props} />
)`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
`;

export const ClippedOverlayGirl = styled(ClippedOverlay)`
  width: 100%;
  z-index: 1;
`;

export const ClippedOverlayBoy = styled(ClippedOverlay)`
  width: 56.6vw;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 77% 100%, 0 100%);
`;