Closed gantgarrett closed 1 year ago
vercel[bot]
commented
1 year ago The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated |
|---|---|---|---|
| spades-calculator | ✅ Ready (Inspect) | Visit Preview | Nov 20, 2022 at 10:04AM (UTC) |
gantgarrett
commented
1 year ago Also, with Chakra UI, even when creating a custom className it does not override the default styles. It seems that Chakra UI button styles specificity is highest hence the !important tag.
gantgarrett
commented
1 year ago I went based of the docs for media queries! Take a look at the latest commit!
mawil583
commented
1 year ago I added a lot more to this PR. I should have split it up into multiple PR's.
This PR should have been no more than this: This one correctly uses ChakraUI to create custom buttons. When attempting this, I ran into an issue that I thought was a ChakraUI bug, but it was just that I was using their library incorrectly. They have custom variants, and when you select a variant, you inherit some CSS that isn't easy to overwrite. So instead of just customizing their CSS for my Button, I also had to define styles of the "default variant". Using @media (hover: hover) I changed the background color on hover to something darker, but it doesn't apply to mobile or tablets where one's cursor could be left hanging over a button.
Extra stuff included in this PR that should have been put into separate PRs:
Hey Michael,
I created a new branch because I had to merge your changes and I was having some conflicts merging your changes into the other BidButtonStyles branch...
I tested this on my mobile and it seems to be working. Had to disable the active and hover state by targeting the default className on the Chakra UI button.
Let me know if this works for you on mobile!