Add Root styles

[sebald]

Description

We currently don't have an option to add root styles (e.g. html, body). This is convenient for building layouts to set background and spacing for apps.

Context

If you want to emulate this with the current state you have to wrap your app in an addition div. This shouldn't be necessary :-/

Use Cases

• Set body background color
• Set body margin/padding
• Set global font family

Consequences

Option to "globally" set CSS.

[viktoria-schwarz]

Where do you imagine these root styles to be? Should they be set once for all applications or somehow flexible and manageable each time you use a component? I don't understand the difference to reset styles..

[sebald]

So here is the question: do the rest styles solve the mentioned use cases?

I imagine there global or root styles be set via the theme. So that we (for example) can set the font once in our docs or give the whole page a background color.

[viktoria-schwarz]

Ahhh, you mean setting these values within the theme. Okay that makes sense :+1:

[viktoria-schwarz]

So to make that work we could add a Component <RootStyles /> with some rootStyles (given in the theme) and place it next to the children in the Provider?

[sebald]

Exactly

[sebald]

BTW hast checked theme-ui. They got a reference for you ☺️

https://github.com/system-ui/theme-ui/blob/develop/packages/theme-provider/src/index.tsx

In the file there is also a solution for the overlay issue (since root styles should only be applied once too).

[viktoria-schwarz]

Yes, I've seen how they do it, but they use their jsx to create the styles, that's what I meant that I don't know how to inject the root object from the theme.

[sebald]

Yes, I've seen how they do it, but they use their jsx to create the styles, that's what I meant that I don't know how to inject the root object from the theme.

@viktoria-schwarz trick question: is that different from what we do? And if so, how?

Also, how far are you in the react course 😬

[viktoria-schwarz]

Not as far as I would like to be :)

And no it's not different, I could make it work (I think yesterday when I tried it I just used wrong imports), though now my tests still fail. I'm trying to make it work!

[viktoria-schwarz]

closing via #1230

[ti10le]

PR was reverted. Issue still in work.

[sebald]

PR was reverted. Issue still in work.

Is there a commit to reproduce the issue? And what's not working correctly?

[ti10le]

waiting for #1317

[ti10le]

It is as good as safe that we use from emotion like this:

export const GlobalStyles = () => {
  const { css } = useTheme();
  const styles = css({
    body: { variant: 'root.body' },
    html: { variant: 'root.html' },
  });

  return (
    <CacheProvider value={rootCache}>
      <Global styles={styles} />
    </CacheProvider>
  );
};

We can do this after fixing problems in #1317