Do I have to use 'variant' or Styled.h1 to get the theme.styles.h1 style applied to <Heading as="h1">Foo</Heading> ?

[kfayelun]

Hey!

Just picked up ThemeUI last week and am looking into if it's something our company should use more. Coming from Styled Components I thought it would be quick to pick up but it's been surprisingly hard work. Still think it seems like a good idea though.

I've been building out a set of Headings and as its a basic component I wanted to use the component that comes with ThemeUI (ThemeProvider only applies the one theme I have, I keep it separate for re-use for storybook).

import React from 'react';
import { Heading } from 'theme-ui';
import ThemeProvider from './providers/ThemeProvider';

const App = () => (
  <ThemeProvider>
    <Heading as="h3">A simple header</Heading>
  </ThemeProvider>
);

export default App;

I see that it gets some basic styling from the theme, but not the styles contained in the theme.style.h[1-6] below:

styles: {
  h1: {
    ...heading,
    fontSize: [6, 7, 8],
    fontWeight: 'bold',
  },
  h2: {
    ...heading,
    fontSize: 4,
  },
  h3: {
    ...heading,
    fontFamily: 'body',
    fontSize: 3,
  },

...

Where heading is

const heading = {
  // resets //
  margin: 0,
  hyphens: 'auto',
  color: 'text',
  // resets end //
  fontFamily: 'heading',
  lineHeight: 'heading',
  fontWeight: 'heading',
};

From the documentation I see that theme.styles only applies to MDX components, or I can use the Styled approach: <Styled.h3>

So are the components included in ThemeUI not MDX components? Is that why the theme.styles doesn't get applied to them?

I can see that the styles object looks correct when I inspect it, and if I use <Styled.h3> instead or add variant=styles.h3 as a prop to the Heading-component above, the correct styles get applied. Out of these options I think the variant one is the best, as with the Styled option you loose the -component functionality. But then you quickly run into trouble as you can only have 1 variant, so if you want something to be both an h3 and all uppercase, you're out of options and either have to build your own or use Styled.

I was hoping that with themeUI I could build a theme and then use the bult in components for all the basic stuff, and where they would get the theme applied by default. Including the styles defined in the theme.styles-object. It doesn't seem like that is the case. I'm sure there's a good reason or that there's something I have forgotten here, but I'd love to know either way.

[keithburgie-rts]

@kfayelun you helped me out a lot here. I ended up building my own heading component that now works exactly how I want, utilizing the styles object as you did.

import React from 'react'
import PropTypes from 'prop-types'
import { Heading as ThemeUIHeading } from 'theme-ui'

export const Heading = ({ children, as = 'h2', ...rest }) => {
  return (
    <ThemeUIHeading as={as} variant={`styles.${as}`} {...rest}>
      {children}
    </ThemeUIHeading>
  )
}

Heading.propTypes = {
  as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  children: PropTypes.node.isRequired,
}

Then when I call it, I get both the proper tags and styles:

<Heading as="h1">I'm a heading</Heading>