How to change hover color for Ant Design v5 Button with Tokens in React?

Question

Working with TyepScript + React and moving from v4 to v5 of Ant Design. Looking to style my button components with tokens vs overrides since they are moving away from explicit CSS usage for v5, but the tokens don't seem to be applying styles how one would expect.

Using the default theme algorithm, I'm specifically trying to change colors for buttons under the "components" section of a theme configuration. The problem I'm having is that I can change the background color for primary just fine, but it would appear that none of the hover and/or border properties will change anything. When hovering, the color always goes to the default antd blue. How does one change the color for hovering with tokens?

Here's an example of what's being used in the theme configuration with TypeScript + React:

{
  algorithm: theme.defaultAlogirthm,
  token: {
    ...
  },
  components: {
    Button: {
      colorPrimary: 'purple',           // works, can see the button as purple 
      colorPrimaryBgHover: 'red',       // displays default blue      
      colorPrimaryBorderHover: 'violet' // displays default blue
    },
    ...
  }
}

So far, I'm only getting the 'colorPrimary' property to display colors as intended. None of the other properties that I have tried had any affect, and I don't understand why. What might I be doing wrong here? I'm not seeing anything in the docs to indicate a bad setup and their examples don't cover to many scenarios either, at least I didn't see a troubleshooting page or anything similar in the v4 → v5 guide.

Answer 1

Just change colorPrimaryBgHover to colorPrimaryHover. Also take a look into their theme editor. There you can find a list of props and what they change into your theme