因为antDesign官方提供的按钮很丑，所以我自己二次封装了

平时个人vue和react都使用，所以也会习惯性的对比elementui和antDesign，发现antDesign库确实在ui方面要比elementui单调些，甚至有些丑，最终实在是忍无可忍，我将antDesign里面的Button组件二次封装了一下，增加了五种状态样式，终于让Button好看了些，接下里我也将我的封装分享给大家，如果有需要的直接拿去使用即可；废话不多说，直接上代码

tsx代码部分

import React, { MouseEventHandler, ReactNode } from 'react'
import classes from './index.module.scss'
import { Button, ButtonProps } from 'antd'
import classNames from 'classnames'

export interface ButtonPropType {
  color?: 'primary' | 'success' | 'info' | 'warning' | 'danger'
}
const ColorBtn: React.FC<ButtonProps & ButtonPropType> = (props) => {
  // prefixCls 完全重写覆盖ant button
  const { disabled, children, color } = props

  const styleClass = classNames({
    [classes['color-primary-normal']]: color === 'primary' && !disabled,
    [classes['color-primary-disabled']]: color === 'primary' && disabled,
    [classes['color-success-normal']]: color === 'success' && !disabled,
    [classes['color-success-disabled']]: color === 'success' && disabled,
    [classes['color-danger-normal']]: color === 'danger' && !disabled,
    [classes['color-danger-disabled']]: color === 'danger' && disabled,
    [classes['color-info-normal']]: color === 'info' && !disabled,
    [classes['color-info-disabled']]: color === 'info' && disabled,
    [classes['color-warning-normal']]: color === 'warning' && !disabled,
    [classes['color-warning-disabled']]: color === 'warning' && disabled,
  })

  return (
    <span className={styleClass}>
      <Button {...props}>{children}</Button>
    </span>
  )
}

ColorBtn.defaultProps = {
  color: 'primary', // 'primary' | 'success' | 'info' | 'warning' | 'danger'
}

export default ColorBtn

scss部分代码

$color-class:'primary-normal' 'primary-disabled' 'success-normal' 'success-disabled' 'danger-normal' 'danger-disabled' 'info-normal' 'info-disabled' 'warning-normal' 'warning-disabled';
$btn-color:#1890ff #1890ffa6 #13ce66 #71e2a3 #f88182 #ff9292 #909399 #bcbec2 #ffba00 #f0c78a;
$btn-color-hoover:white #1890ffa6 white #71e2a3 white #ff9292 white #bcbec2 white #f0c78a;
$btn-backgroud:#e8f4ff #e8f4ff #e7faf0 #e7faf0 #ffeded #ffeded #f4f4f5 #f4f4f5 #fff8e6 #fdf6ec;
$btn-backgroud-hover:#1890ff #e8f4ff #71e2a3 #e7faf0 #ff4949 #ffeded #909399 #f4f4f5 #ffba00 #fdf6ec;
$btn-border-color:#a3d3ff #c4e3ff #a1ebc2 #d0f5e0 #ffb6b6 #ffdbdb #d3d4d6 #d3d4d6 #ffe399 #faecd8;

@each $class,$color,$colorHover,$background,$backgroundHover,$boder in zip($color-class,$btn-color,$btn-color-hoover,$btn-backgroud,$btn-backgroud-hover,$btn-border-color,) {
  .color-#{$class} {
    :global {
      .ant-btn-default{
        border-radius: 5px;
        color: $color;
        background: $background;
        border-color: $boder;
      }
      .ant-btn-default:hover {
        background: $backgroundHover;
        color: $colorHover;
        border-color: $boder;
      }
    }
  }
};

最终按钮展示效果

 

结语

上面的封装我并没有把Button所有的方法和属性都配置了，仅仅只配置了常用的部分，大家可以按照自己的实际需求增加或修改，谢谢大家的观看~