ant design自定义button的样式

如果你想要自定义 Ant Design 的 Button 样式，可以按照以下步骤操作：

1. 创建一个 less 文件，比如说 `custom-button.less`，并在其中写入自定义的样式。

2. 在你的 React 组件中引入这个 less 文件。比如说，在一个名为 `MyButton` 的组件中，你可以这样做：

import React from 'react';
import './custom-button.less';
import { Button } from 'antd';

function MyButton(props) {
  return (
    <Button {...props}>
      {props.children}
    </Button>
  );
}

export default MyButton;

3. 在 `custom-button.less` 文件中，你可以使用 Ant Design 的 Mixin 来定义你的自定义样式。比如说，你可以这样写：

.custom-button {
  .ant-btn {
    background-color: #ff0000;
    border: none;
    &:hover {
      background-color: #ff6666;
      border: none;
    }
  }
}

这里，我们使用了 Ant Design 的 `.ant-btn` Mixin 来定义按钮的样式。注意，我们还使用了 `&:hover` 来定义鼠标悬停时的样式。

4. 最后，在你的组件中使用你的自定义样式。比如说，在 `MyButton` 组件中，我们可以这样写：

import React from 'react';
import './custom-button.less';
import { Button } from 'antd';

function MyButton(props) {
  return (
    <Button {...props} className="custom-button">
      {props.children}
    </Button>
  );
}

export default MyButton;

这里，我们使用了 `className="custom-button"` 来应用我们定义的样式。这样，我们的自定义样式就应用到了 Ant Design 的 Button 组件上。