当使用Bulma设置div组件的样式和使用Typescript设置系统样式时，没有重载与此调用匹配

我正在为我的一个项目使用Bulma和Styled系统

Bulma框架提供了方便的

列

和

列

组件，用于以响应方式包装组件

我想用样式化系统扩展组件的功能

这将编译：

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

// Import styled-system space props.
import { space, SpaceProps } from 'styled-system';

// Create the interface type.
export type ColumnComponentProps = SpaceProps & {
  className?: string;
};

// Styled component.
export const StyledColumn = styled.div`
  ${space}
`;

const defaultProps: ColumnComponentProps = {
  className: '',
};

// Render the customized Column component that has styled-system space functionality too.
const Column: SFC<ColumnComponentProps> = ({
  className,
  children,
  ...props
}) => (
  <StyledColumn className={'column ' + className} {...props}>
    {children}
  </StyledColumn>
);

// Set default props.
Column.defaultProps = defaultProps;

export default Column;

错误

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: ReactNode; m?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; ... 27 more ...; className: string; } | { ...; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Type '{ children: ReactNode; color?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; bg?: string | ... 4 more ... | undefined; backgroundColor?: string | ... 4 more ... | undefined; opaci...' is not assignable to type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture">'.
        Types of property 'color' are incompatible.
          Type 'string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined' is not assignable to type 'string | undefined'.
            Type 'number' is not assignable to type 'string | undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: ReactNode; m?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; ... 27 more ...; className: string; } | { ...; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Type '{ children: ReactNode; color?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; bg?: string | ... 4 more ... | undefined; backgroundColor?: string | ... 4 more ... | undefined; opaci...' is not assignable to type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture">'.
        Types of property 'color' are incompatible.
          Type 'string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined' is not assignable to type 'string | undefined'.
            Type 'number' is not assignable to type 'string | undefined'.

没有与此调用匹配的重载。
重载2的第1个，'（props:Pick&{…；}&{…；}）：ReactElement'给出了以下错误。
类型“{children:ReactNode；m？”：string | number | symbol | | | null）[[x:string]：string | number | symbol | undefined；[x:number]：string | number | symbol | undefined；}| | undefined；..27更多……；className:string；}}}}{}不能分配给类型“intrinsificates&Pick&&{}”。
键入“{children:ReactNode；color？：string | number | symbol | |（string | number | symbol | null）[]|{[x:string]：string | number | symbol | undefined；[x:number]：string | number | symbol | undefined；]|未定义；bg？：字符串|…4更多…|未定义；背景色？：字符串|…4更多…|未定义；opaci…“不可分配给类型“Pick”。
属性“颜色”的类型不兼容。
键入'string | number | symbol | |（string | number | symbol | null）[]|{[x:string]：string | number | symbol | undefined；[x:number]：string | number | symbol | undefined；}| undefined'不能分配给类型'string | undefined'。
类型“number”不可分配给类型“string | undefined”。
重载2/2'（props:StyledComponentPropsWithAs）：ReactElement Component）>'，导致以下错误。
类型“{children:ReactNode；m？”：string | number | symbol | | | null）[[x:string]：string | number | symbol | undefined；[x:number]：string | number | symbol | undefined；}| | undefined；..27更多……；className:string；}}}}{}不能分配给类型“intrinsificates&Pick&&{}”。
键入“{children:ReactNode；color？：string | number | symbol | |（string | number | symbol | null）[]|{[x:string]：string | number | symbol | undefined；[x:number]：string | number | symbol | undefined；]|未定义；bg？：字符串|…4更多…|未定义；背景色？：字符串|…4更多…|未定义；opaci…“不可分配给类型“Pick”。
属性“颜色”的类型不兼容。
键入'string | number | symbol | |（string | number | symbol | null）[]|{[x:string]：string | number | symbol | undefined；[x:number]：string | number | symbol | undefined；}| undefined'不能分配给类型'string | undefined'。
类型“number”不可分配给类型“string | undefined”。

---

我如何创建一个Bulma组件来接受来自样式化系统的其他道具？

尝试将这行中的|改为：

导出类型StyledSystemProps=SpaceProps | ColorProps；

非常确定的是，颜色道具的样式化系统响应道具数组与道具的React的HtmlatAttributes接口之间存在冲突olor。我也一直在寻找解决方案。我要么避免使用它，要么通过将道具应用于组件（例如，

color={color as string}）来绕过它

尝试将这一行中的|改为：

导出类型StyledSystemProps=SpaceProps | ColorProps；

非常确定，ColorProps的Styled Systems responsive props数组与React的HtmlatAttributes界面之间存在冲突。我也一直在寻找解决方案。我要么避开我们通过将道具投射到应用于组件的位置（例如，

color={color as string}

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: ReactNode; m?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; ... 27 more ...; className: string; } | { ...; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Type '{ children: ReactNode; color?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; bg?: string | ... 4 more ... | undefined; backgroundColor?: string | ... 4 more ... | undefined; opaci...' is not assignable to type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture">'.
        Types of property 'color' are incompatible.
          Type 'string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined' is not assignable to type 'string | undefined'.
            Type 'number' is not assignable to type 'string | undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: ReactNode; m?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; ... 27 more ...; className: string; } | { ...; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Type '{ children: ReactNode; color?: string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined; bg?: string | ... 4 more ... | undefined; backgroundColor?: string | ... 4 more ... | undefined; opaci...' is not assignable to type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 254 more ... | "onTransitionEndCapture">'.
        Types of property 'color' are incompatible.
          Type 'string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | undefined' is not assignable to type 'string | undefined'.
            Type 'number' is not assignable to type 'string | undefined'.