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