Migrating to v0.14

npm install @emotion/styled

const MyHeading = Button.withComponent('h1')

// Option 1: Use the 'as' prop
<Button as="h1">Heading</Button>

// Option 2: Create a new component
import { Box } from 'theme-ui'

const MyHeading = (props) => (
  <Box as="h1" sx={{ variant: 'buttons.primary' }} {...props} />
)

import { Themed } from '@theme-ui/mdx'

<Themed.h1 as="h2">This is styled as h1 but renders as h2</Themed.h1>

<h2 sx={theme => theme.styles.h1}>
  This is styled as h1 but renders as h2
</h2>

<h2 sx={{ variant: 'styles.h1' }}>
  This is styled as h1 but renders as h2
</h2>