Overriding the height of a button component?

[machty]

I needed to implement a button that expands to the height of its containing element, e.g.:

In here the pink "circled" region is a div with h-20 and some padding. We needed the button to expand to the height of the white region, and we preferred to do it with h-full rather than choosing a more brittle numeric value.

I wasn't sure how to do this because:

1. The Button component only gives you a size: small/large/medium option for height
2. These values translate to an 'h-N' class (e.g. h-7, h-12) being applied to the button element
3. If I use the open-ended className to pass in h-full, that results in both the default height class AND my h-full class being applied to the HTML class attribute, e.g. "... h-7 ... h-full", and due to CSS applying properties in the order they appear in the css file rather than the class list on the element, it's a toss-up which height class will "win".

I ended up "solving" this by passing className: "!h-full" to producing a winning property of "height: 100% !important".

Is this currently the best way to accomplish this? Or did I overlook something obvious?