[CSSReset] HTML headings don't work as expected

I noticed an issue when using react-markdown which uses html tags for rendering markdown.

Apparently, the CSSReset sets font-size and font-weight for h1-h6 to inherit

https://github.com/chakra-ui/chakra-ui/blob/5f15805914ea3c4fc0338228a8a95f657f408bbe/packages/chakra-ui/src/CSSReset/preflight.js#L489-L496

This causes HTML headings to not have the look that one would expect as seen in this sandbox.

https://codesandbox.io/s/rough-violet-84oif

However, if I remove the styling via devtools, they look fine.

It also seems that the CSSReset is doing other things as well that affect the look and feel of the site, which would probably fit better inside the default theme, while leaving the actual resets like body margins and such inside the reset.

For example:

https://github.com/chakra-ui/chakra-ui/blob/5f15805914ea3c4fc0338228a8a95f657f408bbe/packages/chakra-ui/src/CSSReset/preflight.js#L440-L443

https://github.com/chakra-ui/chakra-ui/blob/5f15805914ea3c4fc0338228a8a95f657f408bbe/packages/chakra-ui/src/CSSReset/preflight.js#L403-L404

Another thing that I noticed is that without the CSSReset, some styling breaks, such as this <Textarea> extending over a <Flex>. This might be related to something else though but I managed to fix it with <Textarea width="initial">

[subodhk01]

Has anyone found the solution for this issue?

[VR314]

@subodhk01, this is the solution I found: chakra-ui-markdown-renderer.