Heading children styles coming through as the string "heading" instead of theme values

[erikdstock]

I'm trying to bootstrap a relatively simple next.js typescript x theme-ui 0.6.6 app and have the following in my theme:

  text: {
    heading: {
      fontFamily: "heading",
      fontWeight: "heading",
      lineHeight: "heading",
    },
  },

Sorry, I feel like i wrestle with this stage of setup every single time i start a new theme-ui project and I'm sure that I am just missing something simple.

Current Repo is here where I am updating a simple mdx-theme-ui-next.js example to use typescript and the latest theme-ui.

[lachlanjc]

Yep, I've run into this many times too. It's super frustrating. This is usually caused by having multiple installations of Emotion in a project, which means the theme context won't be properly inherited by components. It looks like you've specified @emotion/react yourself in package.json. If you remove that & re-install/re-start, does it work?

[erikdstock]

Wow, yep. Inherited from the repo i started with. Solved.

[erikdstock]

As an aside, I feel like an FAQ/common gotchas could be a huge win for this project. It's so great, the conventions are relatively intuitive but things like this make the barrier to setup so much greater. Every single time I feel like i need to re-figure-out

• css normalize/reset
• whether styles are applied automatically to plain jsx
• sx={{variant: "special" vs variant="special"
• when to use "variantName" vs "path.to.variantName"
• styles mysteriously not working
• multiple ways to make render text (Text, Heading, Themed.p, <p sx={{...)
• library conflicts like this

[lachlanjc]

Yeah, I wholly agree. All of those are great examples of things you right now just have to learn by experience with it, & it's super powerful once you do, but it's way too hard (it took me months for sure). If you'd like to contribute anything of any size to the docs, that'd be much appreciated, but it's certainly on my radar & I appreciate the list as a starting point!

[lachlanjc]

Made a PR in #1494 to handle 3-4 on your list! Let me know if that explanation is clearer. With CSS normalize, what do you mean? Our components have the necessary resets built-in, & you can use styles.root to do stuff like body { margin: 0; }. Are there other resets you typically use?