React - 如何用 css 变量替换 Ant-Design 主按钮的悬停颜色？

Question

我正在使用 React、Redux、Ant-Design、LESS 和许多其他模块创建一个应用程序。我必须从数据库中获取原色并将其分配给 CSS 变量 (--primary-color)。我将颜色变暗并将其分配给另一个 CSS 变量 (--primary-color-darken)。我使用CSS变量而不是LESS变量，因为LESS变量在编译后被硬编码并且无法更改。我成功地用我的 CSS 变量覆盖了 AntD css 类，但是对于悬停类它不起作用。浏览器似乎正确理解了样式，但计算出了错误的样式。

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

我重新分配与包装所有应用程序内容的包装组件内联的变量。

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