Custom button hover state in Grommet theme

Question

Just started using Grommet. I must be missing something obvious because I feel like I'm trying to do something fairly simple. I've created a custom theme, and I'm trying to add a hover state to change the background color of a Button. The default hover behavior remains, and the background color does not change.

Here's an abbreviated sample of my code:

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>

What am I missing? Thank you!

UPDATE:

Using the extend property as @Bas suggested does work. I'm still curious why the provided hover wouldn't accomplish the same?

UPDATE 2:

As of Feb '21, according to this Github issue in order to make use of the button.hover.primary attribute as intended, you must first define values for button.hover.default. After defining the default values, then the primary and/or secondary button values seem to work as expected.

score 2 · Accepted Answer · answered Feb 14 '21 at 11:22

2

You can use the extend attribute on button, which value is a function to do something like this:

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

Color reference

Sandbox example

answered Feb 14 '21 at 11:22

5eb

14,798
5
21
65

Thanks. I will give it a try and let you know if it works. So, if this is the way to do it, then do you know whey the `hover` theme property doesn't work? Or is that intended for a different purpose? – MrRay Feb 15 '21 at 04:38
I don't know, I couldn't get the other way to work either. Seems like that way or something similar should work from looking at the [documentation of `button`](https://v2.grommet.io/button). Having said this I think the above approach is consistent and flexible as far as theming goes though. – 5eb Feb 15 '21 at 08:58

score 0 · Answer 2 · answered Mar 11 '21 at 10:38

To clarify the solution, please find a Codepen built on grommet issue 4111 mentioned above. It confirms that default: {} must be defined in theme for hover to work.

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

Custom button hover state in Grommet theme

2 Answers2