reactjs - React - 如何用 CSS 变量替换 Ant-Design Primary 按钮的悬停颜色？

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>

查看打印屏幕的行为:

正确设置原色样式:/image/RV057.png

正确计算原色:
/image/h7967.png

样式悬停原色正确]:
/image/tSWIN.png

计算的悬停原色不正确:/image/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;
  }
}