如何用样式化组件和TypeScript来包装Ant Design？

Question

我想用样式化组件来包装我的蚂蚁设计组件，我知道这是可能的（https://gist.github.com/samuelcastro/0ff7db4fd54ce2b80cd1c34a85b40c08），但是我在用TypeScript做同样的事情时遇到了麻烦。

这是我到目前为止的内容：

import { Button as AntButton } from 'antd';
import { ButtonProps } from 'antd/lib/button/button';
import styledComponents from 'styled-components';

interface IButtonProps extends ButtonProps {
   customProp: string;
}

export const Button = styledComponents<IButtonProps>(AntButton)`
  // any custom style here
`;

如您所见as any，为了使它起作用，我正在定义ant-design按钮，否则我得到一些不兼容的类型，例如：

Argument of type 'typeof Button' is not assignable to parameter of
type 'ComponentType<IButtonProps>'.

Type 'typeof Button' is not assignable to type
'StatelessComponent<IButtonProps>'.

Types of property 'propTypes' are incompatible.

 Property 'customProp' is missing in type '{ 
    type: Requireable<string>; 
    shape: Requireable<string>; 
    size: Requireable<string>; 
    htmlType: Requireable<string>; 
    onClick: ...
    etc
 }

谢谢。

解：

import { Button as AntButton } from 'antd';
import { NativeButtonProps } from 'antd/lib/button/button';
import * as React from 'react';
import styledComponents from 'styled-components';

export const Button = styledComponents<NativeButtonProps>(props => <AntButton {...props} />)`
    // custom-props
`;

Answer 1

上面的解决方案对我来说不起作用，但这解决了它。

const Button = styled((props: NativeButtonProps) => <AntButton {...props} />)``;

Answer 2

我发现了这个古老的问题并尝试以一种简单的方式解决：

import React from 'react';
import styled from 'styled-components';
import { Card } from 'antd';
import { CardProps } from 'antd/lib/card';

export const NewCard: React.FunctionComponent<CardProps> = styled(Card)`
  margin-bottom: 24px;
`;

没有渲染道具：D

如果你只是需要把一个组件包装成函数组件，那也行。但是您将丢失类组件的属性，例如Card.Meta.

有一个解决方法：

import React from 'react';
import styled from 'styled-components';
import { Card } from 'antd';
import { CardProps } from 'antd/lib/card';

export const NewCard: typeof Card = styled(Card)<CardProps>`
  margin-bottom: 24px;
` as any;

一切（也许……XD）都可以作为原始的 Antd 组件工作；)

Answer 3

我的代码在这里。这就是工作。

import React from 'react';
import { Button as AntButton } from 'antd';
import { ButtonProps } from 'antd/lib/button/button';
import styled from 'styled-components';

const Container = styled.div`
  font-size: 20px;
`;


const Button: React.FunctionComponent<ButtonProps> = styled(AntButton)`
  margin-top: 24px;
  margin-left: 30px;
`;

export default function Home() {
  return (
    <Container>
      Hello World
      <Button type="primary">test</Button>
    </Container>
  );
}

Answer 4

问题的根源似乎是styled-components期望内部组件 ( AntButton) 接受指定接口 ( ) 中的所有props IButtonProps，但AntButton不接受customProp。要解决此问题，请按照文档本节中的最后一个示例进行操作，并使用无状态函数组件customProp在调用之前删除AntButton。

export const Button = styledComponents<IButtonProps>(
  ({ customProp, ...rest }) => <AntButton {...rest} />)`
  // any custom style here
`;