How override a Button Ant Design with styled component and typescripts?

Ask Time：2019-10-22T02:46:00 Author：Mitch

I want to override a Button Ant Design with typescript and styled component to personalize the style. But when I try te result is not good.

I try some test but never I have the good display.

I try like this How to wrap up Ant Design with Styled Components and TypeScript? but no result.

But the result haven't the style of ant Design component but the button inherite the Button ant design and her props.

ButtonStyledComponent

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} />
))`
   pType: string;
   pSize: string;
   pShape: string;
`;

Button

import * as React from "react";
import { Button } from "./ButtonStyleComponent";

export interface ButtonProps {
  pType?: "primary" | "secondary" | "danger";
  pSize?: "small" | "medium" | "large";
  pShape?: "round" | "rect";
}

class Button extends React.Component<ButtonProps> {
  render() {
    return (
      <Button
        {...this.props}
        pType={this.props.pType}
        pSize={this.props.pSize}
        pShape={this.props.pShape}
      >
        {this.props.children}
      </Button>
    );
  }
}

export { Button };

the problem is when I execute this code, I see just an ugly grey Button and not a Button with the design of the Ant Design Button.

The other problem is when I try to call the method of a Ant Design Button, the method is not recognize (ex: the method onClick ).

Author:Mitch，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/58492416/how-override-a-button-ant-design-with-styled-component-and-typescripts

Damian Green :

Here is an example of something I've done that's fairly similar using antd\n\nimport { Button } from 'antd'\nimport { ButtonProps } from 'antd/lib/button'\nimport useStyles from 'isomorphic-style-loader-forked/useStyles'\nimport React from 'react'\nimport s from './CardButton.css'\n\ninterface CardButtonProps extends ButtonProps {\n onClick?: () => void\n}\n\nconst CardButton = ({ children, onClick, ...rest }: CardButtonProps) => {\n useStyles(s)\n return (\n <Button ghost type=\"primary\" className={s.root} onClick={onClick} {...rest}>\n {children}\n </Button>\n )\n}\nexport default CardButton\n\n\n\nHowever for your question maybe this answer helps more How to wrap up Ant Design with Styled Components and TypeScript?",

2019-10-21T18:57:00

How override a Button Ant Design with styled component and typescripts?