Skip to content
Theme UI
GitHub

Styled component

Use the Styled component 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 Styled.h1 component to render an <h1> element with styles from theme.styles.h1.

// example
import React from 'react'
import { Styled } from 'theme-ui'
export default props => (
<div>
<Styled.h1>Hello, styled heading!</Styled.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 Styled 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
<Styled.h2 as="div">Hello!</Styled.h2>

This can also be used to style components like the Gatsby Link component to match other links.

<Styled.a as={Link} to="/about">
About
</Styled.a>

Styled.root

By default, Theme UI does not apply any global styles for typography. To apply top-level typographic styles, the Styled.root component can be used to wrap any page layout or MDX document. By adding styles to theme.styles.root, this component will apply any base styles that you define.

// example theme.js
export default {
fonts: {
body: 'system-ui, sans-serif',
monospace: 'Menlo, monospace',
},
fontWeights: {
body: 400,
heading: 700,
},
lineHeights: {
body: 1.5,
heading: 1.125,
},
styles: {
root: {
fontFamily: 'body',
fontWeight: 'body',
lineHeight: 'body',
},
},
}
<Styled.root>
<MyMDXDocument />
</Styled.root>
Edit the page on GitHub
Previous:
Color Modes
Next:
MDX Components