问题描述
刚开始使用 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" }
}
}
}
});