Реагируйте - Как заменить цвет наведения основной кнопки Ant-Design на переменную css?

Question

Я создаю приложение с React, Redux, Ant-Design, LESS и многими другими модулями.Мне нужно получить основной цвет из БД и назначить его переменной CSS (--primary-color).Я затемняю цвет и назначаю его другой переменной CSS (--primary-color-darken).Я использую переменные CSS вместо переменных LESS, потому что переменные LESS жестко закодированы после компиляции и не могут быть изменены.Мне удалось переписать класс AntD css моей переменной CSS, но с классом hover это не работает.Кажется, браузер правильно понимает стиль, но вычисляет неправильный.

//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;
  }
}

Я переназначаю переменную inline с компонентом-оберткой, который переносит весь контент приложения.

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

Посмотрите наэкраны печати для поведения:

1. Стиль основного цвета правильно: https://i.stack.imgur.com/RV057.png

2. Расчетный основной цвет правильно: https://i.stack.imgur.com/h7967.png

3. Основной цвет при наведении курсора правильно]: https://i.stack.imgur.com/tSWIN.png

4. Неправильно вычисленный основной цвет при наведении курсора: https://i.stack.imgur.com/Ed4e9.png

Answer 1

Обернуть в :global примерно так:

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