Guidance needed: How to override the default styling of Heading components (from @theme-ui/components)?

Hi! First off, thanks for this awesome project!

The Issue

I’m trying to set different colours for different heading levels.

https://theme-ui.com/components/heading says:

The Heading component uses theme.text.heading as its default variant style.

But that’s the same theme.text.heading values for all h1, h2, h3 etc. So the only way to set different colours for different heading levels is to use “overrides” in the styles object: https://theme-ui.com/theming#styles

const theme = {
  styles: {
    h1: {
      color: "hotpink"
    }
  }
};

When using the Styled API, this works great, but it does not work as expected when using <Heading> from @theme-ui/components.

Repro

Here’s my minimal repro - I expect both ‘foo’ and ‘bar’ to be displayed in hotpink:

https://codesandbox.io/s/loving-napier-sbdpf?fontsize=14&hidenavigation=1&theme=dark

My Question

Is there a way to make the <Heading> component use my base styles (w/ different colours at different heading levels) without making consumers pass in a ‘variant’ override each time?

Thanks!

[magicmark]

Gotcha, thanks!

For those wanting to use the <Heading /> component, perhaps a new prop (‘level’?) could make things easier?

<Heading level={3}>foo</Heading>

Would imply both as="h3" and variant="styles.h3".

Just providing a data point!

Thanks again!

(Feel free to close this issue if it feels like there’s nothing further to discuss - I can just switch to the Styled component in the meantime.)

[jxnblk]

You can use any of the theme.styles variants in any component, like the Heading component:

<Heading variant='styles.h2' />