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

Question

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

score 3 · Answer 1 · answered Oct 21 '19 at 18:57

Here is an example of something I've done that's fairly similar using antd

import { Button } from 'antd'
import { ButtonProps } from 'antd/lib/button'
import useStyles from 'isomorphic-style-loader-forked/useStyles'
import React from 'react'
import s from './CardButton.css'

interface CardButtonProps extends ButtonProps {
  onClick?: () => void
}

const CardButton = ({ children, onClick, ...rest }: CardButtonProps) => {
  useStyles(s)
  return (
    <Button ghost type="primary" className={s.root} onClick={onClick} {...rest}>
      {children}
    </Button>
  )
}
export default CardButton

However for your question maybe this answer helps more How to wrap up Ant Design with Styled Components and TypeScript?

Thanks for your answer, Your second exemple, I try it but I have always a grey button, I want to create a Button who override AntD Button and apply on it after a personalize style with TypeScript and styled Components. But Without personalize style I think the button must be like of a Ant Design Button . — Mitch, Oct 21 '19 at 20:13

score 2 · Answer 2 · answered Jan 29 '20 at 05:34

There is answer in FAQs in setyled components website.
Below I'm overriding default background color of Antd button.

import React from "react";
import "antd/dist/antd.css";
import { Button } from "antd";
import styled from "styled-components";

const MyButton = styled(Button)`
  &&& {
    background: red;
  }
`;

export default function App() {
  return (
    <div className="App">
      <MyButton>Click</MyButton>
    </div>
  );
}

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

2 Answers2