Skip to content
Theme UI
GitHub

The sx Prop

The sx prop lets you style elements inline, using values from your theme. To use the sx prop, add the custom /** @jsx jsx */ pragma comment to the top of your module and import the jsx function.

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
<div
{...props}
sx={{
// values referencing scales defined in a theme
color: 'primary',
bg: 'lightgray',
fontFamily: 'body',
// raw CSS value
boxShadow: '0 0 1px 3px rgba(0, 0, 0, .125)',
}}
/>
)

To read more about how the values are converted and for a reference of supported CSS properties, see the @styled-system/css docs.

Responsive Values

Styled System includes a shorthand syntax for writing mobile-first responsive styles using arrays as values. This is useful when you want to change a single property across multiple breakpoints without needing to write verbose media query syntax.

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
<div
{...props}
sx={{
width: ['100%', '50%', '25%'],
}}
/>
)

Margin and Padding

Margin and padding are treated as first-class citizens in Styled System, using values defined in the theme.space scale, and include an optional shorthand syntax for using negative space in your application.

In addition to shorthands for applying margin and padding on the x- and y-axes, a terse naming convention can be used to quickly edit styles.

// example of using margin and padding shorthand syntax
<div
sx={{
px: 3, // padding-left & padding-right
// paddingX: 3 will also work
py: 4, // padding-top & padding-bottom
mb: 3, // margin-bottom
}}
/>

Functional Values

For shorthand CSS properties or ones that are not automatically mapped to values in the theme, use an inline function to reference values from the theme object.

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
<div
{...props}
sx={{
boxShadow: theme => `0 0 4px ${theme.colors.primary}`,
}}
/>
)

Raw CSS

To opt-out of using theme-based CSS, use the css prop to render raw CSS values.

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
<div
{...props}
css={{
// raw values
color: 'tomato',
fontSize: 24,
}}
/>
)
Edit the page on GitHub
Previous:
Theming
Next:
Styling MDX