如何使用样式化组件和打字稿覆盖 Button Ant Design？答案

【问题标题】：How override a Button Ant Design with styled component and typescripts?如何使用样式化组件和打字稿覆盖 Button Ant Design？
【发布时间】：2020-02-17 21:42:09
【问题描述】：

我想用 typescript 和 styled 组件覆盖 Button Ant Design 以个性化样式。但是当我尝试结果并不好。

我尝试了一些测试，但从未有过良好的显示效果。

我尝试这样How to wrap up Ant Design with Styled Components and TypeScript? 但没有结果。

但是结果不是ant Design组件的样式而是button继承了Button ant design和她的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;
`;

按钮

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

导出{按钮};

问题是当我执行这段代码时，我只看到一个丑陋的灰色按钮，而不是一个带有 Ant Design Button 设计的按钮。

另一个问题是当我尝试调用 Ant Design Button 的方法时，该方法无法识别（例如：方法 onClick ）。

【问题讨论】：

标签： reactjs typescript styled-components antd

【解决方案1】：

在设置组件网站的常见问题解答中有答案。
下面我覆盖了 Antd 按钮的默认背景颜色。

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

【讨论】：

【解决方案2】：

这是我使用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

但是对于您的问题，这个答案可能对您有更多帮助How to wrap up Ant Design with Styled Components and TypeScript?

【讨论】：

感谢您的回答，您的第二个示例，我尝试了一下，但我总是有一个灰色按钮，我想创建一个覆盖 AntD 按钮的按钮，并在使用 TypeScript 和样式进行个性化样式后应用它成分。但是如果没有个性化风格，我认为按钮必须像 Ant Design Button。