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

[magicmark]

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!

[jxnblk]

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

<Heading variant='styles.h2' />

[magicmark]

@jxnblk thanks! buuuut what if you want to change the heading level to something not h2 (the default)?

(the actual is 'h2', not 'h3')

The "fix" here would be:

<Heading variant='styles.h3' as="h3">baz</Heading>

specifying that we want an h3 twice seems like something we could improve on? :)

[jxnblk]

You can use Styled.h2 and Styled.h3 if you want the same styles from theme.styles, the Heading component is set up to work a little differently

[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.)

[justincy]

This is a but confusing. It's also quite unfortunate because it puts us in a situation where we can't use @theme-ui/Components for all primitives. We also can't use Styled for all primitives since it doesn't support all elements. So we either use both or we use neither and roll everything on our own in one consistent manner.

@jxnblk It feels like this situation could be improved. Do you agree? What do you think should happen? Can we help improve it?

[justincy]

I want to avoid consistently asking myself, "Do I need to use Styled or a component?" So I ended up creating a small module that exports the pieces I use all together:

export const Header1 = Styled.h1;
export const Header2 = Styled.h2;
export const Header3 = Styled.h3;
export const Header4 = Styled.h4;
export const Header5 = Styled.h5;
export const Paragraph = Styled.p;
export { Button, Grid, Input, Label, Text, Flex } from "@theme-ui/components";

It's also confusing that some components use theme.styles and others have properties outside of styles.

[jxnblk]

@justincy The Styled component is only meant as a way to use the same styles from markdown content. For other parts of your application, you can use the Theme UI components, but really it's up to you to decide how you want to use the library

[justincy]

The Styled component is _only_ meant as a way to use the same styles from markdown content.

Thanks. That's helpful to know.