How to apply a theme from typography outside mdx? cannot get it working (gatsby)

[kuworking]

As long as I understand, if I want to use Typograhy.js and Theme-ui in Gatsby I have 2 options

• Configure them separately and use both gatsby-plugins
• Use only Theme-ui and wrap all content (mdx o not) within a <Styled.root> tag

*Is that correct?

Then I'm trying the second option, where I'm shadowing my gatsby-plugi-theme-ui/index.js with this

import merge from 'deepmerge'
import typography from './typography'
import colors from './colors'
import styles from './styles'

export default merge.all([
  typography,
  {
    initialColorMode: `light`,
    colors,
    styles,
  },
])

with typography.js being

import 'typeface-open-sans'
import { toTheme } from '@theme-ui/typography'
import wordpress2012 from 'typography-theme-wordpress-2012'

export default toTheme(wordpress2012)

colors.js

export default {
  modes: {
    dark: {
//...
    },
    other: {
//...
    },
  },
}

And styles.js an empty export default {}

Then, in my programatically created localhost:8000/ page I have

import { Styled } from 'theme-ui'
//...
return (
    <Styled.root>
    <h1>Test</h1>
    <Styled.h1>Test2</Styled.h1>
    </Styled.root>
  )

But when I compare the properties of <h1> in the typography web (left) and with here (right), they are different

What am I doing / understanding wrong?

[kuworking]

I've also tried, in the main page

import { Styled, ThemeProvider } from 'theme-ui'
import { toTheme } from '@theme-ui/typography'
import wordpress2012 from 'typography-theme-wordpress-2012'
import 'typeface-open-sans'

const theme = toTheme(wordpress2012)

//...
  return (
    <ThemeProvider theme={theme}>
<h1>test</h1>
    </ThemeProvider>

But also doesn't work (not even the typography is loaded - without Styled.root)

---

And I can also see that versions from theme-ui and typography are not equals, this is comparing these web pages applying the same typography theme

• https://theme-ui.com/typography/
• https://kyleamathews.github.io/typography.js/

Maybe I'm just not understanding this well?

[justinkuntz]

This screencast from @johno might be helpful: https://egghead.io/lessons/react-style-components-rendered-by-mdx-with-theme-ui-in-gatsby?pl=theme-ui-37644190

[kuworking]

I think the problem is that it may look like you can implement typography themes in your website through theme-ui, but is this the case?

Looking at the same implementation of the typography theme in both theme-ui and typography web pages they look different, so maybe it is just not possible (?)

[justinkuntz]

I am just beginning to dive into theme-ui/gatsby and noticed in the shadowing documentation it mentions creating a file user-site/src/gatsby-theme-blog/gatsby-plugin-theme-ui/index.js to shadow index.js from gatsby-plugin-theme-ui. Is that what you have added?

[kuworking]

Yes, you have the code in the 1st comment

[jxnblk]

The @theme-ui/typography package creates a theme.styles object, which applies to MDX content. You'll need more than the Styled.root component to apply those styles outside of MDX, if that's maybe what you're running into?

[kuworking]

The @theme-ui/typography package creates a theme.styles object, which applies to MDX content. You'll need more than the Styled.root component to apply those styles outside of MDX, if that's maybe what you're running into?

Yes yes, sorry, as it is said in the docs it is really a matter of using the Styled object and that's all