React - 如何用 css 变量替换 Ant-Design 主按钮的悬停颜色?
React - How to replace the hover color of an Ant-Design Primary button with a css variable?
我正在使用 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
像这样包裹在 :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;
}
}
只需在 CCS 上添加属性 :hover class
.ant-btn-primary {
background: #yourColor;
border-color: #yourColor;
}
.ant-btn-primary:hover {
background: #yourColor;
border-color: #yourColor;
}
我正在使用 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
像这样包裹在 :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;
}
}
只需在 CCS 上添加属性 :hover class
.ant-btn-primary {
background: #yourColor;
border-color: #yourColor;
}
.ant-btn-primary:hover {
background: #yourColor;
border-color: #yourColor;
}