reactjs - 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>
我错过了什么?谢谢!
更新:
按照@Bas的建议使用该extend
属性确实有效。我仍然很好奇为什么提供的不会完成同样的事情?hover
更新 2:
截至 21 年 2 月,根据这个 Github 问题,为了button.hover.primary
按预期使用该属性,您必须首先定义button.hover.default
. 定义default
值后,primary
和/或secondary
按钮值似乎按预期工作。
解决方案
推荐阅读
- c++ - “void”类型的值不能分配给 CPP 中“int”类型的实体
- intellij-idea - 即使我没有突出显示任何代码,IntelliJ 也会格式化整个文件
- intellij-idea - 如何使用 Intellij 的结构替换将 Bootstrap 4 单选按钮重构为 Bootstrap 5
- python - Python多项式计算效率
- python - 如何变黑 - python 格式化程序 - 在 vscode 开发容器上工作?
- javascript - 不和谐.JS | 发布特定链接后自动踢某人?
- java - 基于另一个列表 Java 对列表进行排序
- google-bigquery - GBQ 执行立即保存结果到表
- svg - 如何在浏览器中为 SVG 动画添加硬件加速?
- typescript - Property 'id' does not exist on type 'object'?