3

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

4

2 回答 2

2

您可以使用extendon 属性button，它的值是执行以下操作的函数：

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

颜色参考

沙盒示例

于 2021-02-14T11:22:44.343 回答
0

为了阐明解决方案，请查找基于上述索环问题 4111构建的Codepen 。它确认必须在主题中定义才能使悬停工作。default: {}

const customTheme = deepMerge(grommet, {
  button: {
    default: {}, // this is required for hover below to work
    hover: {
      primary: {
        background: { color: "accent-1" }
      }
    }
  }
});
于 2021-03-11T10:38:29.643 回答