Antd：如何设置按钮悬停颜色？

Question

我在 antd.customize.less 文件中有以下配置：

@btn-primary-bg: #ffe900;
@btn-primary-color: @primary-color;

@btn-default-color: @primary-color;
@btn-default-bg: #ffffff;

悬停在主按钮上时一切正常，但悬停在默认按钮上时，按钮中的文本颜色更改为 @btn-primary-bg，我想覆盖它，但我找不到任何像“@btn-”这样的属性默认悬停颜色”此处。如果有的话，如何才能覆盖它？

Answer 1

我遇到了同样的问题，但我仍在寻找更好的解决方案。但是，目前我可以建议您将类似的内容添加到全局样式文件中：

.ant-btn-default:hover, .ant-btn-default:focus {
  border-color: #bee2e5;
  color: #fff;
}

更新

antd 更新到 5.0.0 版本后，有一种更漂亮的方法可以使用 ConfigProvider 来实现。

假设我们已经包装了我们的应用程序并为主题分配了一个带有参数的对象。

<ConfigProvider theme={{
  components: {
    Button: {
       colorPrimaryBorderHover: 'red',
       colorPrimaryHover: 'lightgray',
       colorPrimary: 'red',
       colorPrimaryActive: 'lightgray',
       colorPrimaryTextHover: 'lightgray',
    }
  }
}}>
  <App />
</ConfigProvider>

实际上有很多参数可以自定义应用程序的外观，您可以在

node_modules/antd/es/config-provider/context.d.ts

文件

但是您的配置可能很大，但为了保持代码可读，您可以使用 ThemeConfig 接口传递此对象作为从另一个 .ts 文件导出的值。

<ConfigProvider theme={myCustomTheme}>
  ...

Answer 2

重新分配更少的变量。我试图编辑与 @primary-color 连接的所有内容，但没有更改 Antd 为悬停/活动状态生成的颜色。看起来没有办法用更少的变量来做到这一点。