CSS 是否有办法改变Antd内部按钮的颜色

在本文中，我们将介绍如何改变Antd内部按钮的颜色。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

1. 使用自定义样式

Antd提供了许多自定义样式的选项，我们可以利用这些选项来改变按钮的颜色。

首先，在你的CSS文件中创建一个新的样式类，并设置你想要的颜色。例如：

.custom-button {
  background-color: #ff0000;
  color: #ffffff;
  border-color: #ff0000;
}

接下来，在你的按钮组件中，添加刚刚创建的自定义样式类。例如：

import React from 'react';
import { Button } from 'antd';
import './styles.https://sotoolbox.com/tag/css target="_blank" rel="nofollow">css';

const CustomButton = () => {
  return (
    <Button className="custom-button">Custom Button</Button>
  );
}

这样，按钮将会应用自定义样式类中定义的颜色。

2. 修改Antd主题

如果你不想每次都手动为按钮添加自定义样式类，你可以修改Antd的主题来改变按钮的颜色。

首先，在你的项目中创建一个名为custom-theme.less的文件，并导入Antd的默认样式。

@import '~antd/dist/antd.less';

然后，你可以使用变量覆盖来修改Antd主题。例如，你可以设置@primary-color变量的值为你想要的颜色。

@primary-color: #ff0000;

最后，在你的应用程序中，使用修改后的主题文件替代默认的Antd样式。例如，在你的index.js文件中添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider } from 'antd';
import './custom-theme.less';
import App from './App';

ReactDOM.render(
  <ConfigProvider>
    <App />
  </ConfigProvider>,
  document.getElementById('root')
);

这样，所有的Antd按钮将会应用主题中定义的新颜色。