/
🎨

Theme UI

https://theme-ui.com
react
Table of contents

Theme spec

theme-ui.com/theme-spec

JSX pragma and the sx prop

https://theme-ui.com/sx-prop

jsx
/** @jsx jsx */
import { jsx } from 'theme-ui'

Packages and methods

useThemeUI

theme-ui.com/use-theme-ui

js
import { useThemeUI } from 'theme-ui'
export const MyComponent = () => {
const { theme, colorMode, setColorMode } = useThemeUI()
return <pre>{JSON.stringify(theme, null, 2)}</pre>
}

Using custom theme object values in sx prop

Use the variant key as documented here.

jsx
// your theme object
const theme = {
motion: {
defaultTransition: {
transition: 'all 300ms ease-in-out',
},
},
}
// use the `variant` key
const Link = () => <a sx={{ variant: 'motion.defaultTransition' }}>Click me</a>
// could also do this
const Link = () => (
<a sx={{ transition: (theme) => theme.motion.defaultTransition.transition }}>
Click me
</a>
)

@theme-ui/color

theme-ui.com/package...s/color

js
/** @jsx jsx */
import { jsx } from 'theme-ui'
import { darken, lighten } from '@theme-ui/color'
export default (props) => (
<div
{...props}
sx={{
color: darken('primary', 0.25),
bg: lighten('primary', 0.875),
}}
/>
)

Using TypeScript

Adding an sx prop to a custom component

This example allows a user to pass an sx prop to a child component. In order to do that, you'll need an interface from theme-ui: SxStyleProp

tsx
import React, { FunctionComponent } from 'react'
import { SxStyleProp } from 'theme-ui'
import { Heading } from 'theme-ui'
type HeadingTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
interface MassiveTitleProps {
sx?: SxStyleProp
as?: HeadingTags
}
export const MassiveTitle: FunctionComponent<MassiveTitleProps> = ({
sx,
as = 'h1',
children,
}) => {
return (
<Heading
as={as}
sx={{
color: 'primary',
...sx,
}}
>
{children}
</Heading>
)
}

Tips

Object styles

Reference the theme within

js
{
mx: theme => `-${theme.space[2]}`,
},

Pseudo elements

js
{
"::before": {
content: '""',
display: 'block',
width: 32,
height: 32,
backgroundColor: 'tomato',
}
}
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.