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

Question

刚开始使用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：

从2月21日起，根据this Github issue的说法，为了按预期使用button.hover.primary属性，您必须首先定义button.hover.default的值。在定义default值之后，primary和/或secondary按钮值似乎可以按预期工作。

Answer 1

您可以在button上使用extend属性，该属性的值是一个函数，用于执行以下操作：

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

Color reference

Sandbox example

Answer 2

为了阐明解决方案，请找到上面提到的构建在grommet issue 4111上的Codepen。它确认必须在主题中定义default: {}，悬停才能工作。

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