Перегрузка не соответствует этому вызову при стилизации компонента div с помощью Bulma и Styled-System с использованием Typescript

Question

Я использую Bulma и Styled-system для моего проекта.

Платформа Bulma предоставляет удобный Columns и Column компонент для гибкой упаковки компонентов.

Я хотел расширить функциональность компонента с помощью Styled-System.

Это скомпилируется:

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;

Однако, если я добавлю другую функциональность, такую ​​как Color из Styled-System я получаю следующую ошибку:

Не компилируется

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

import { space, SpaceProps, color, ColorProps } from 'styled-system'; // Now we bring in Color too.

// Extend the interface type to support ColorProps too.
export type StyledSystemProps = SpaceProps | ColorProps;

export type ColumnComponentProps = StyledSystemProps & {
  className?: string;
};

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

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

const Column: SFC<ColumnComponentProps> = ({
  className,
  children,
  ...props
}) => (
  <StyledColumn className={'column ' + className} {...props}>
    {children}
  </StyledColumn>
);

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'.

Как я могу создать компонент Bulma, который принимает дополнительные реквизиты из системной системы?