React - How to replace the hover color of an Ant-Design Primary button with a css variable?

Question

I'm creating an app with React, Redux, Ant-Design, LESS and many other modules. I have to fetch the Primary color from the DB and I assign it to a CSS variable (--primary-color). I darken the color and assign it to an other CSS variable (--primary-color-darken). I use CSS variables instead of LESS variables because the LESS variables are hardcoded after the compilation and cannot be changed. I succeed to overwrite the AntD css class with my CSS variable, but with hover class it doesn't work. The browser seems to understand the style correctly but compute the wrong one.

//LESS code
//Default assigned CSS variables
:root {
  --primary-color: #EB3052;
  --primary-color-darken: #D62D4C;
  --primary-hover-color: var(--primary-color-darken);
}

//Default value for Ant-Design
@primary-color: #EB3052;
@primary-hover-color: #D62D4C;

//Overwrite the Ant-Design class
.ant-btn.ant-btn-primary,
.ant-btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  &:hover {
    background-color: var(--primary-hover-color) !important;
    border-color: var(--primary-hover-color) !important;
  }
}

I reassign variable inline with a wrapper component that wrap all the app content.

[other wrapper]
<div class="CssVariableApplicator" style="--primary-color:#FFFF22;--primary-color-darken:#e6e61f;" data-reactroot="">
  [content]
</div>

Look at the printscreens for the behavior:

1. Styled Primary color correctly: https://i.sstatic.net/RV057.png

2. Computed Primary colorcorrectly: https://i.sstatic.net/h7967.png

3. Styled Hover Primary color correctly]: https://i.sstatic.net/tSWIN.png

4. Computed Hover Primary color incorrectly: https://i.sstatic.net/Ed4e9.png

Dolliedolloff

I found the problem. I reassigned in javascript only --primary-color and --primary-color-darken. It seems that the reassigned variable in javascript will not affect other variables assigned this variable. So I need to reassign every variable that need to change. – Dolliedolloff

Answer 1

Wrap in :global like so:

:global(.ant-btn-primary) {
  background-color: var(--secondary-color);
  &:hover {
    background-color: var(--secondary-hover-color) !important;
    border-color: var(--secondary-hover-color) !important;
  }
}

Crossgarnet

is there a awy to do it with less variables only? – Tiddly

Answer 2

This worked for my Custom Button Component

I prefer not to disturb the primary type extended by ANT-DESIGN.

Let's say you have a success button used across the application. Then it's better to create a custom class.

General UX: Background would be green. Color would be white and alter both when hovered

This is how I achieved it.

.success {
  background-color: green;
  color: white;
}

.success:hover {
  background-color: white;
  color: green;
  border-color: green;
}

Note: Don't use !important in the styles. It would increase the priority of your styles but will hinder the antd styles when needed.

Let's say you want to disable a button in a form based on some condition.

The disabled button looks greyish. ( General UX )

But if you use !important the button will be disabled but still follow your styles (green-bg,... )

That's a mismatch.

Code Reference: Code Sandbox

Image Reference: Attached 👇

Nesselrode

Answer 3

Just add the atribute :hover on the CCS class

.ant-btn-primary {
    background: #yourColor;
    border-color: #yourColor;
}

.ant-btn-primary:hover {
    background: #yourColor;
    border-color: #yourColor;
}

Fowler

Answer 4

İf you use less format of the antd you can add this one to your main less and edit the backgroud color of the button.

@btn-text-hover-bg: "color-you-want";

Piccadilly

Do not work in my case. Is anyone tried? – Mischance