Как переопределить дизайн кнопки Ant с помощью стилизованного компонента и шрифтов?

Question

Я хочу переопределить дизайн кнопки Ant с машинописным шрифтом и стилизованным компонентом, чтобы персонализировать стиль. Но когда я пытаюсь, результат не очень хороший.

Я пробую тест, но у меня никогда не было хорошего дисплея.

Я пытаюсь вот так Как обернуть Ant Design с помощью Styled Components и TypeScript? но безрезультатно.

Но результат не в стиле компонента Ant Design, а в кнопке наследует дизайн кнопки Ant и ее реквизиты.

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};

проблема в том, что когда я выполняю этот код, я вижу толькоуродливая серая кнопка а не кнопка с дизайном кнопки дизайна муравья.

Другая проблема заключается в том, что когда я пытаюсь вызвать метод кнопки «Дизайн», метод не распознается (например, метод onClick).

Answer 1

Вот пример того, что я сделал, что довольно похоже на использование 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

Однако, для вашего вопроса, возможно, этот ответ поможет больше Как завершить Ant Design со стилизованными компонентамии TypeScript?