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

【问题标题】：Custom button hover state in Grommet themeGrommet 主题中的自定义按钮悬停状态
【发布时间】：2021-05-17 10:25:32
【问题描述】：

刚开始使用 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 按钮值似乎按预期工作。

【问题讨论】：

标签： reactjs grommet

【解决方案1】：

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

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

Color reference

Sandbox example

【讨论】：

谢谢。我会试一试，让你知道它是否有效。所以，如果这是这样做的方法，那么你知道hover 主题属性为什么不起作用吗？还是为了其他目的？
我不知道，我也找不到其他工作方式。通过查看documentation of button，似乎应该以这种方式或类似的方式工作。话虽如此，我认为就主题而言，上述方法是一致且灵活的。

【解决方案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" }
      }
    }
  }
});

【讨论】：