Question

我正在将布尔玛和样式系统用于我的项目。

Bulma框架提供了方便的Columns和Column组件，用于以响应方式包装组件。

我想通过样式化系统扩展组件的功能。

此编译：

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，则会出现以下错误：

不编译

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组件，以接受来自样式系统的其他道具？

使用Typescript为Bulma和Styled-System设置div组件的样式时，没有重载匹配此调用

0 个答案: