CODEWITHSUNDEEP
cssreactjstypescriptparceljs
smacdav
smacdav

Reputation: 445

How to debug a CSS issue using React, TypeScript, and Parcel

I am primarily a Java developer and I'm not 100% familiar with the technologies I'm working with here.

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:

checkboxes aligned well

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

checkboxes with less space below some of them

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

screen shot of CSS in DevTools for my localhost

and production:

screen shot of CSS in DevTools for 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 nevertheless I am interested in any ideas on how to investigate the issue.

Upvotes: 1

Views: 429

Answers (1)

smacdav
smacdav

Reputation: 445

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.

Upvotes: 2

Related Questions