如何用css变量替换Ant设计主按钮的悬停颜色？
如何用css变量替换Ant设计主按钮的悬停颜色？
提问于 2018-11-27 20:15:41
我正在创建一个应用程序，包括React，Redux，Ant-Design，更少和许多其他模块。我必须从DB中获取主颜色，并将其分配给CSS变量(--主颜色)。我将颜色变暗，并将其分配给另一个CSS变量(--主颜色-暗)。我使用CSS变量而不是更少的变量，因为较少的变量是在编译后硬编码的，不能更改。我成功地用我的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>查看打印屏幕上的行为：
- 正确样式的主颜色：https://i.stack.imgur.com/RV057.png
- 计算原色：https://i.stack.imgur.com/h7967.png
- 风格正确的Hover原色]：https://i.stack.imgur.com/tSWIN.png
- 计算Hover原色错误：https://i.stack.imgur.com/Ed4e9.png
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-01-15 05:13:11
在: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;
}
}Stack Overflow用户
发布于 2021-05-26 08:30:00
只需在CCS类上添加atribute :悬浮即可
.ant-btn-primary {
background: #yourColor;
border-color: #yourColor;
}
.ant-btn-primary:hover {
background: #yourColor;
border-color: #yourColor;
}Stack Overflow用户
发布于 2022-08-03 13:32:16
这适用于我的自定义按钮组件
我不喜欢打扰蚂蚁设计扩展的主要类型。
假设您在整个应用程序中使用了一个“成功”按钮。那么最好创建一个自定义类。
通用UX:背景将是绿色的。颜色将是白色的，当两种颜色都悬浮在一起时，颜色会改变。
我就是这么做到的。
.success {
background-color: green;
color: white;
}
.success:hover {
background-color: white;
color: green;
border-color: green;
}注意:不要在样式中使用!important。它将增加您的样式的优先级，但在需要时会阻碍antd样式。
假设您想要基于某种条件禁用表单中的按钮。
被禁用的按钮看起来是灰色的。(一般UX )
但是，如果您使用!important，按钮将被禁用，但仍然遵循您的样式(绿色-bg，.)
这是错配。
代码参考：码砂箱
图片参考:附件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53507437
复制相关文章
相似问题
腾讯云开发者
