因为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 } from 'antd'

const ColorBtn = (props: {
  block: boolean
  disabled: boolean
  href: string
  target: string
  shape: 'default' | 'circle' | 'round'
  size: 'large' | 'middle' | 'small'
  icon: ReactNode
  // btn 颜色种类
  color: 'primary' | 'success' | 'info' | 'warning' | 'danger'
  loading: boolean
  // 插槽
  children: string | null
  onClick: MouseEventHandler<HTMLElement>
}) => {
  const { block, disabled, href, target, shape, size, icon, color, loading, onClick, children } =
    props

  const styleClassFn = (): string => {
    if (color === 'primary' && !disabled) {
      return classes['primary-color-normal']
    } else if (color === 'primary' && disabled) {
      return classes['primary-color-disabled']
    }

    if (color === 'success' && !disabled) {
      return classes['success-color-btn']
    } else if (color === 'success' && disabled) {
      return classes['success-color-disabled']
    }

    if (color === 'danger' && !disabled) {
      return classes['danger-color-btn']
    } else if (color === 'danger' && disabled) {
      return classes['danger-color-disabled']
    }

    if (color === 'info' && !disabled) {
      return classes['info-color-btn']
    } else if (color === 'info' && disabled) {
      return classes['info-color-disabled']
    }

    if (color === 'warning' && !disabled) {
      return classes['warning-color-btn']
    } else if (color === 'warning' && disabled) {
      return classes['warning-color-disabled']
    }

    return classes['primary-color-normal']
  }

  return (
    <span className={styleClassFn()}>
      <Button
        block={block}
        disabled={disabled}
        href={href}
        target={target}
        shape={shape}
        size={size}
        icon={icon}
        loading={loading}
        onClick={onClick}
      >
        {children}
      </Button>
    </span>
  )
}

ColorBtn.defaultProps = {
  color: 'primary',
  block: false,
  disabled: false,
  href: null,
  target: null,
  icon: null,
  loading: false,
  shape: 'default',
  children: null,
  size: 'middle',
  onClick: () => {},
}

export default ColorBtn

scss部分代码

// 正常状态
.primary-color-normal {
  :global {
    .ant-btn-default{
      border-radius: 5px;
      color: #1890ff;
      background: #e8f4ff;
      border-color: #a3d3ff;
    }
    .ant-btn-default:hover {
      background: #1890ff;
      color: white;
    }
  }

}
// 禁用状态
.primary-color-disabled {
  :global {
    .ant-btn-default{
      border-radius: 5px;
      color: #1890ffa6;
      background: #e8f4ff;
      border-color: #c4e3ff;
    }
    .ant-btn-default:hover{
      color: #1890ffa6;
      background: #e8f4ff;
    }
  }
}


.success-color-btn {
  :global {
    .ant-btn-default{
      border-radius: 5px;
      color: #13ce66;
      background-color: #e7faf0;
      border-color: #a1ebc2;
    }
    .ant-btn-default:hover{
      background: #71e2a3;
      color: white;
    }
  }
}
.success-color-disabled {
  :global {
    .ant-btn-default{
      border-radius: 5px;
      color: #71e2a3;
      background-color: #e7faf0;
      border-color: #d0f5e0;
    }
    .ant-btn-default:hover{
      color: #71e2a3;
      background-color: #e7faf0;
    }
  }
}

.danger-color-btn {
  :global{
    .ant-btn-default{
      border-radius: 5px;
      color: #ff4949;
      background-color: #ffeded;
      border-color: #ffb6b6;
    }
    .ant-btn-default:hover {
      background: #ff4949;
      color: white;
    }
  }
}
.danger-color-disabled {
  :global{
    .ant-btn-default{
      border-radius: 5px;
      color: #ff9292;
      background-color: #ffeded;
      border-color: #ffdbdb;
    }
    .ant-btn-default:hover {
      color: #ff9292;
      background-color: #ffeded;
    }
  }
}

.info-color-btn {
  :global{
    .ant-btn-default{
      border-radius: 5px;
      color: #909399;
      background: #f4f4f5;
      border-color: #d3d4d6;
    }
    .ant-btn-default:hover {
      border-radius: 5px;
      background: #909399;
      color: white;
    }
  }
}
.info-color-disabled {
  :global{
    .ant-btn-default{
      border-radius: 5px;
      color: #bcbec2;
      background: #f4f4f5;
      border-color: #e9e9eb;
    }
    .ant-btn-default:hover {
      color: #bcbec2;
      background: #f4f4f5;
    }
  }
}

.warning-color-btn {
  :global{
    .ant-btn-default{
      border-radius: 5px;
      color: #ffba00;
      background: #fff8e6;
      border-color: #ffe399;
    }
    .ant-btn-default:hover {
      background: #ffba00;
      color: white;
    }
  }
}
.warning-color-disabled {
  :global{
    .ant-btn-default{
      border-radius: 5px;
      color: #f0c78a;
      background: #fdf6ec;
      border-color: #faecd8;
    }
    .ant-btn-default:hover {
      color: #f0c78a;
      background: #fdf6ec;
    }
  }
}

最终按钮展示效果

 

结语

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