How to wrap up Ant Design with Styled Components and TypeScript?

Question

I want to wrap up my ant-design components with styled-components, I know that this is possible (https://gist.github.com/samuelcastro/0ff7db4fd54ce2b80cd1c34a85b40c08) however I

Answer 1

I have found this ancient question and try to solve in an easy way:

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

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

without render props :D

if you just need wrap a component as function component, that's all right. But you will lose the properties of class component such as Card.Meta.

There is a workaround:

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)`
  margin-bottom: 24px;
` as any;

Everything (maybe... XD) works as original Antd Component ;)