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

Question

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

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

查看打印屏幕以了解行为：

正确设置原色样式：https://i.stack.imgur.com/RV057.png
正确计算原色： https://i.stack.imgur.com/h7967.png
正确设置悬停主色样式]： https://i.stack.imgur.com/tSWIN.png
计算悬停原色不正确：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;
  }
}

Answer 2

只需在 CCS 上添加属性 :hover class

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

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

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

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

reactjs

hover

less

antd

css-variables