索环主题中的自定义按钮悬停状态

Custom button hover state in Grommet theme

刚开始使用索环。我一定是遗漏了一些明显的东西,因为我觉得我正在尝试做一些相当简单的事情。我创建了一个自定义主题,我正在尝试添加悬停状态以更改 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:

截至 2021 年 2 月,根据 this Github issue,为了按预期使用 button.hover.primary 属性,您必须首先定义 button.hover.default 的值。定义 default 值后,primary and/or secondary 按钮值似乎按预期工作。

您可以在 button 上使用 extend 属性,它的值是一个函数来执行如下操作:

const customTheme = deepMerge(grommet, {
  button: {
    extend: ({ primary }) => {
      if (primary) {
        return `
        &:hover {
          background: ${"#6FFFB0"}; // accent-1 color
        }
      `;
      }
    }
  }
});

Color reference

Sandbox example

要弄清楚解决方法,请找上面提到的一个Codepen built on grommet issue 4111。它确认必须在主题中定义 default: {} 才能使悬停工作。

const customTheme = deepMerge(grommet, {
  button: {
    default: {}, // this is required for hover below to work
    hover: {
      primary: {
        background: { color: "accent-1" }
      }
    }
  }
});