如何解决Grommet 主题中的自定义按钮悬停状态
刚开始使用 grommet。我一定遗漏了一些明显的东西,因为我觉得我正在尝试做一些相当简单的事情。我创建了一个自定义主题,并尝试添加悬停状态以更改 Button
的背景颜色。默认悬停行为保持不变,背景颜色不变。
这是我的代码的缩写示例:
const customTheme = deepMerge(grommet,{
global: {
// colors and such
},button: {
hover: {
primary: {
background: { color: "accent-1" }
}
}
}
};
// then I implement the Button like so
<grommet theme={customTheme}>
<Button
label="My Sad Button"
primary
/>
</grommet>
我错过了什么?谢谢!
更新:
使用 extend
属性作为 @Bas 建议确实有效。我仍然很好奇为什么提供的 hover
不能实现相同的效果?
更新 2:
截至 21 年 2 月,根据 this Github issue,为了按预期使用 button.hover.primary
属性,您必须首先定义 button.hover.default
的值。定义 default
值后,primary
和/或 secondary
按钮值似乎按预期工作。
解决方法
您可以在 extend
上使用 button
属性,该值是一个函数,可以执行以下操作:
const customTheme = deepMerge(grommet,{
button: {
extend: ({ primary }) => {
if (primary) {
return `
&:hover {
background: ${"#6FFFB0"}; // accent-1 color
}
`;
}
}
}
});
,
要阐明解决方案,请找到基于上述 Codepen 构建的 grommet issue 4111。它确认必须在主题中定义 default: {}
才能使悬停工作。
const customTheme = deepMerge(grommet,{
button: {
default: {},// this is required for hover below to work
hover: {
primary: {
background: { color: "accent-1" }
}
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。