Heading size does not work

So i got heading with that code

<Heading as="h2" size="xs">{title}</Heading>

When i change size prop nothing happened

In devtools I see that when focusing on my heading

.css-1fgomf8 {
    font-size: sm;
    line-height: shorter;
    font-weight: bold;
    font-family: heading;
}

in font-size I got sm string. Not only is this a non-working option, but it also substitutes even the wrong string

[segunadebayo]

Thanks for chiming in @with-heart. @osadasami, you need to double-check that:

1. You have the ThemeProvider at the root of your app.
2. If you modified the theme, check that you have fontSizes.sm set.

I believe it should all work correctly if you try those. Let us know if it’s still an issue and we’ll revisit this.

Thank you.

[osadasami]

I got it work with gatsbyjs. Just need to import ThemeProvider in components/layout.js and wrap all the content

// components/layout.js
import { ThemeProvider } from "@chakra-ui/core"

const Layout = ({ children }) => {
  return (
    <ThemeProvider>
      <Header siteTitle={data.site.siteMetadata.title} />

      <div>
        <main>{children}</main>
      </div>
    </ThemeProvider>
  )
}

And all theme variables work great. Thank you