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.

Consider adding the text of the error as quote in your question (Image hosting may expire someday). You can also add an exclamation mark in front of your image markup to display it as an image. — XouDo, Jan 17 '22 at 13:47

score 0 · Accepted Answer · answered Jan 10 '22 at 09:44

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%);
`;

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

1 Answers1