Cannot override global default style (Heading component)

🐛 Bug report

Hello, I want to override global default styles to HTML elements when extending the theme object, so that when I use the as prop, the overridden default styles would be referenced correctly. For example:

// theme
const theme = extendTheme({
  styles: {
    global: {
      h3: {
        fontSize: "50px",
        fontWeight: "300"
      }
    }
  }
});

// usage
<Heading as="h3">Hello world</Heading>

The fontSize and fontWeight styles above are not applied, but when I add color it works fine. I wasn’t sure if this is a bug or intentional implementation detail.

💻 Link to reproduction

JavaScript CodeSandbox repro

🧐 Expected behavior

New fontSize and fontWeight styles to be correctly applied on h3 element when:

1. Extending theme global styles
2. Setting as="h3" on a Heading component

[advename]

This is a valid reason and issue. Using <Heading as="h1">Lorem</Heading> should yield a h1 element without any default size prop. Headings should remain consistent throughout a UI and only have different sizes, when explicitly defined, not the other way around… .

I had even to go that far and disable <Heading/> in our project with the following Eslint rule:

rules:{
    'no-restricted-syntax': [
      'error',
      {
        message : "Don't use Chakra's <Heading/> component. It creates an inconsistent UI with different heading sizes. Use <Text as='h1'/> instead.",
        selector: 'ImportDeclaration[source.value="@chakra-ui/react"] > ImportSpecifier[imported.name="Heading"]',
      },
    ],
}

The other alternative would be creating a custom size named h1, but then you’d have to double specify props <Heading as="h1" size="h1>.

Please reconsider this issue.

[santialbo]

If you want to use the Heading component you need to customize the Heading component on the theme.

const theme = extendTheme({
  components: {
    Heading: {
      baseStyle: {
        fontWeight: "300"
      },
      sizes: {
        // default size is md
        xl: {
          fontSize: "50px",
        },
      },
    },
  },
});

If you don’t want to do that, then use the Text component instead

<Text as="h3">Hello world</Text>

See updated codesandbox https://codesandbox.io/s/old-river-uwpql?file=/src/App.js