Antd: how to set button hover color?

Question

I have the following configuration in the antd.customize.less file:

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

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

On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to @btn-primary-bg, which I want to override, but I couldn't find any property like "@btn-default-hover-color" here. How can this be overridden, if at all?

Answer 1

I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:

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

UPDATE

After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.

Let's suppose we have wrapped our App and assigned to the theme an object with parameters.

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

Acctually there are a lot of parameters to customize the appereance of your app which you can find in your node_modules/antd/es/config-provider/context.d.ts file

However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.

<ConfigProvider theme={myCustomTheme}>
  ...