Need help debugging a CSS issue using React, TypeScript, and Parcel

Question

I am primarily a Java developer and I'm not 100% familiar with the technologies I'm working with here, so please forgive me if this turns out to be something with an obvious answer.

I have a React application written in Typescript which gets run through a Parcel bundler prior to deployment. When I run the application for local testing on my dev machine, the spacing of checkboxes in the application looks great:

The problem is after I build the application and run it on production, the checkboxes are no longer properly aligned:

I have managed to track it down to a difference in the CSS between local:

and production:

If you notice, the production CSS has an extra margin-bottom: 0px in the top CSS file ( .css-1h4ws66 ). This is my problem--it is overriding the margin-bottom: 10px in the .css-lidh19 file and thus ruining the spacing. My problem is that I have no idea where the 0px bottom margin is coming from. It doesn't appear to be defined in any of the styles in the application.

I realize this isn't enough information for anyone to be able to say "this is your problem; do that," but if anyone has any idea on how to even investigate the issue, I would be greatly appreciative of any help I can get in that direction.

Answer 1

I didn't find why there was a margin-bottom: 0px that caused the issue in the first place, but I managed to find the place where the 10px margin was defined and add !important , which resolved the issue.

For anyone dealing with chakra-ui, don't just look for properties margin-bottom , marginBottom , or even the shorthand mb . Also look for my properties, as they define both the top and bottom margins for a component.