Question

我开始根据Styled System建议的包装器组件https://styled-system.com/guides/spacing/#wrapper-component实现以下Stack组件，该组件应将类以及父组件的样式附加到每个孩子，因此我们不需要在dom。

Stack.stories.tsx文件在下面注释的行上有以下错误：

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<PropsWithChildren<StyledChildrenProps>, "className" | "children"> & Partial<Pick<PropsWithChildren<StyledChildrenProps>, never>>, "className" | "children"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element[]; mb: number; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<StyledChildrenProps>, "className" | "children"> & Partial<...>, "className" | "children"> & { ...; } & { ...; }'.
      Property 'mb' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<StyledChildrenProps>, "className" | "children"> & Partial<...>, "className" | "children"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<FC<StyledChildrenProps>, any, {}, never>): ReactElement<StyledComponentPropsWithAs<FC<StyledChildrenProps>, any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: Element[]; mb: number; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<StyledChildrenProps>, "className" | "children"> & Partial<...>, "className" | "children"> & { ...; } & { ...; }'.
      Property 'mb' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<StyledChildrenProps>, "className" | "children"> & Partial<...>, "className" | "children"> & { ...; } & { ...; }'.

但是，如果我用// @ts-nocheck隐藏了键入错误，它实际上可以按预期工作，所以我认为这是我的键入问题而不是逻辑问题。

// stack.tsx

import React, { ReactElement } from "react";
import styled from "styled-components";
import { space } from "styled-system";

const classnames = (...args: string[]) => args.join(" ");
const getClassName = (el: ReactElement) =>
  (el.props && el.props.className) || "";

interface StyledChildrenProps {
  className: string;
  children: ReactElement | ReactElement[];
}

export const StyledChildren: React.FC<StyledChildrenProps> = ({
  className,
  children,
  ...props
}) => {
  const styledChildren = React.Children.map<ReactElement, ReactElement>(
    children,
    (child) =>
      React.cloneElement(child, {
        className: classnames(getClassName(child), className),
      })
  );
  return <>{styledChildren}</>;
};

const Stack = styled(StyledChildren)(space);

export default Stack;

// Stack.stories.tsx

import React from "react";
import Box from "./box";
import Stack from "./stack";
import { ThemeProvider } from "styled-components";
import theme from "./theme";

export default {
  title: "Stack",
  component: Stack,
};

export const Options = () => (
  <ThemeProvider theme={theme}>
    <Stack mb={4}> // Error found here
      <Box>Test</Box>
      <Box>Test 2</Box>
    </Stack>
  </ThemeProvider>
);

使用样式化系统的包装器组件出现样式化组件TypeScript错误

0 个答案: