Adding styles to theme object implicitly overwrites root

[vfilter]

Describe the bug Recently added mdx files to an existing project, so to style them, I added a styles object to my theme. Only defined h1, h2 and p properties. But adding the styles object, even if empty, created an inexplicable 8 pixel margin around every single page.

Then I found out that 8 pixel is the browser default for the user agent stylesheet and that it would have to be manually set to 0. The problem was, that I didn't change the root style and that the Theme UI docs say that the global style will not be polluted by the styles object in the theme.

Apparently, however, once the styles property is added to the theme, it reverts the style for the html root to the default, which is 8 pixel. My options were to either delete the styles object completely, or add a root property with margin: 0.

Expected behavior I would expect adding the styles object to only change the root stylesheet once it has the root property, and otherwise do not alter the current style of the root element.

[lachlanjc]

That makes a ton of sense! Here's the line of code that's causing this issue: https://github.com/system-ui/theme-ui/blob/develop/packages/theme-provider/src/index.tsx#L19

I'm not sure why it's written that way, but goes way back.