Themed component
Use the Themed components dict to render UI with styles from
theme.styles outside of MDX. For example, if you'd like
to reuse heading styles in a React component, you can use the Themed.h1
component to render an <h1> element with styles from theme.styles.h1.
// exampleimport { Themed } from 'theme-ui'export default (props) => (<div><Themed.h1>Hello, styled heading!</Themed.h1></div>)
For a full list of keys available, see the Theme Specification docs.
Changing the HTML element or component
The rendered HTML element can be changed for each Themed component. This can
be useful for ensuring accessible, SEO-friendly, and semantically-correct HTML
is rendered while leveraging styles from the theme. This API originated in
Rebass and is similar to the @emotion/styled API.
The following example renders a <div> that is styled like an <h2> element.
// example<Themed.h2 as="div">Hello!</Themed.h2>
This can also be used to style components like the Gatsby Link component to
match other links.
<Themed.a as={Link} to="/about">About</Themed.a>
Global Styles
To add base typographic styles to the <html> element, add styles to
theme.styles.root. Previous versions of Theme UI used the Themed.root
component. See the theming docs for more information.