为另一个 Styled Component 设置样式时，道具的类型应该是什么？

Question

我在我的 NextJS 项目中使用样式化组件和打字稿。我将 div 元素的样式设置如下：

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

然后，我对这个 ClippedOverlay 组件进行样式化以进一步制作两个组件。代码如下：

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

但是，在 ClippedOverlayBoy 和 ClippedOverlayGirl 样式的组件中，我看到一个关于 ClippedOverlay 用法的打字稿错误 样式组件。

错误如下图所示： Image showing typescript error in IDE

我不知道我做错了什么。你能指出错误吗？谢谢。

Answer 1

这会起作用

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

为另一个 Styled Component 设置样式时，道具的类型应该是什么？

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

typescript

reactjs

styled-components

next.js