Remove sx props from Paragraph component

[aaronadamsCA]

theme-ui/packages/components/src/Paragraph.js

Lines 14 to 22 in 29b9b37

	sx={{
	// reset margin by default: avoid relying on user-agent margins (not aware of theme-ui space scale)
	margin: 0,
	// set a max-width: avoid full-page paragraphs
	'@media screen and (min-width: 36em)': {
	maxWidth: '48rem',
	},
	...sx,
	}}

While I appreciate the intent, this makes it really tough to use Paragraph except for one very specific use case. It takes a specificity hack to defeat it using the theme:

export const theme = {
  text: {
    paragraph: {
      ':not(_)': {
        my: 3,
        maxWidth: 'unset'
      }
    }
  }
}

I think the margin reset probably belongs in a base theme, and the maxWidth is an interesting idea that could be mentioned in the documentation or included in a paragraph variant in one of the themes.

[hasparus]

Hi @aaronadamsCA 👋 Thanks for the issue!

cc @lachlanjc @flo-sch

[flo-sch]

Alright, now that you mention it, I agree that such opinionated style should rather be set in a theme.

It is fairly easy to set it globally in the "text.paragraph" variant, and much harder to unset indeed.

(I had similar issues recently with Checkbox, Radio and Switch, ended up building custom components instead)

Should we move that to the base preset perhaps? And/or some others, I do not know all of them, so just mention which ones?
(And remove the hardcoded breakpoint perhaps?)

Currently margins are not working (<Paragraph my={ 10 }>). It only works with sx - <Paragraph sx={{ my: 10 }}>

[flo-sch]

I am pretty sure sx is the way forward for any kind of style

@hasparus any chance you know what was/is the intent and status behind those "shortcut" props? I am also curious (they are still mentioned in some examples of the doc I think)

[hasparus]

@flo-sch No idea TBH, mate. I remember jxnblk's comment he wanted to move towards sx everywhere, but I'm not sure if I can find it.

My opinion on this is:

• You want shorthand style props? Build your own components on top of Theme UI Components (which most likely is sth you'd do anyway when your UI gets complex). Or use Chakra for a ready-made set of UI primitives.
• Want a high-level layer on top of your className prop similar to style prop but allowing all legal CSS (Emotion) or even fancier shenanigans (That's Theme UI).

I found something in the documentation... - https://dev.theme-ui.com/components/#style-props