Theme-ui: body font from theme not applying

[JaKXz]

Describe the bug
I'm using gatsby-plugin-theme-ui (with gatsby-starter-default) and using the Styled component from theme-ui and I'm not seeing the fonts change for any "body" components (div, p, etc). What's strange is that the headings change just fine.

To Reproduce
Contents of my src/gatsby-plugin-theme-ui/index.js:

import theme from "@theme-ui/preset-tailwind";

export default {
  ...theme,
  fonts: {
    ...theme.fonts,
    body: "Arial, sans-serif",
    heading: "Arial, sans-serif"
  },
};

Expected behavior
I would expect the body fonts to change when I change the body key. As I mentioned the headings do change, so I'm not sure if I'm doing something wrong :

[JaKXz]

Fixed it by adding a Styled.root component to my Layout that was wrapping my content... 2 follow up questions though:

1) shouldn't this be part of gatsby-plugin-theme-ui, to wrap the root element of the app with Styled.root?
2) Styled.root does not work with the sx prop as expected for some reason? :

[jxnblk]

This is the current behavior (the docs might not be super clear), but the next version will apply some typographic styles to the body element by default, with an option to disable that behavior

[JaKXz]

I don't quite follow:

This is the current behavior

Please forgive my very old school JS question here, but what does this refer to? 😅I reported this as a bug because the Styled.h1s (and other headings) were changing when i was changing theme.fonts.heading but the Styled.ps and other body elements were not when I was changing theme.fonts.body, without Styled.root wrapping the main content. The inconsistent behaviour is a bug is it not?

the next version will apply some typographic styles to the body element by default

Are you talking about the next version of the Styled.root component? Will the next version of the Styled.root component accept/use the sx prop like the other components?

[CanRau]

He's referring to Theme UIs next version https://github.com/system-ui/theme-ui/pull/535 AFAIK

[jxnblk]

I believe the preset-tailwind might be where the inconsistent application of theme.fonts.heading vs theme.fonts.body is applied. Rather than apply a fontFamily declaration to each <p> element, the intent is to apply a style to a root element and use CSS inheritance for <p>, <ul>, <ol>, etc.

[JaKXz]

@jxnblk thanks for the reply, that makes sense.

So I tried removing Styled.root and just putting this in my theme file as documented, using preset-base:

import theme from "@theme-ui/preset-base";

export default {
  ...theme,
  fonts: {
    ...theme.fonts,
    heading: `'Cochin', 'Libre Baskerville', serif`,
    body: `'Open Sans', ${theme.fonts.body}`,
  },
  styles: {
    root: {
      // uses the theme values provided above
      fontFamily: "body",
      fontWeight: "body",
    },
  },
}

but still no dice, the styles don't even show up:

[JaKXz]

But I can confirm this is fixed in v0.3.1 :) thank you!

[george-norris-salesforce]

Is this still an issue? The docs clearly show the example with the body font displaying..

fonts: {
    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: 'Georgia, serif',
    monospace: 'Menlo, monospace',
  },

[zeorin]

I'm on v3.1.0 and I needed to use Styled.root _in Storybook_. I added it as the child of ThemeProvider in a decorator in preview.js.