fix: Allow overriding Paragraph margins via theme

[bernharduw]

This fixes #1774 - I found that margin: 0 is set by default (coming from Box maybe? Not 100% sure).

So if we don't set the margin for Paragraph manually, the specificity issues disappear.

I also added two tests using a theme override - the other two cases are already covered by the existing tests.

Version

Published prerelease version: v0.9.1-develop.0

Changelog

🐛 Bug Fix

• @theme-ui/components
  • fix: Allow overriding Paragraph margins via theme #1775 (@bernharduw)

Authors: 1

• Bernhard Gschwantner (@bernharduw)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/47JD5Y5pEcvNmyvyW9autuBcwSij
✅ Preview: https://theme-ui-git-fork-bernharduw-fix-paragraph-theme-m-41f60d.vercel.app

[hasparus]

Thanks for the PR @bernharduw!

[hasparus]

Doesn't this break the scenario when users depend on margin being set to 0 by default? (See snapshot in the diff.)

[bernharduw]

The snapshot still has margin: 0 in it, but at the very beginning.

[bernharduw]

I think that way the effective margin on paragraphs is still 0, but can be overridden by any styling method, regardless of theme, styled-system-style or direct sx overrides. The tests still all pass, only the duplicate margin: 0 is reduced to a single occurrence.

The margin:0 in line 1095 comes from the Box which sets margin:0 as a default, so we should be safe here.

[hasparus]

Thanks! Yup, I can see that first margin: 0. Sorry!

[hasparus]

🚀 PR was released in v0.9.2-develop.0 🚀

[sergeylukin]

WD for removing duplication. I, however, struggle to understand the purpose of Box's default margin: 0... which causes troubles when parent intends to set inner Boxes' margin via '> * + *': 'marginLeft: 30px' for instance.
Why do we need to set margin: 0? If it's inherited, we can set m={0} in case it's required (which is an edge case really).
Would love to know more about that. Thanks!
Hope that's not too far from the subject lol

[lachlanjc]

@sergeylukin I believe it's just a reset, since elements like form fields & lists often have margin applied by the default browser stylesheet. Happy to accept better solutions to that problem, though!