The sx Prop

With sx you can provide any valid CSS to an element and utilize tokens from your theme to ensure consistency and that you are utilizing constraint-based design principles when styling your application.

This prop provides a superset of CSS (contains all CSS properties/selectors in addition to custom ones) that maps values directly from the theme, depending on the CSS property used. Also, it allows a simple way of defining responsive values that correspond to the breakpoints defined in the theme.

To find out which properties are theme-aware, see the Style Props.

Use cases#

Although the sx prop is considered an escape hatch, there are few cases where it is needed.

Defining Any Standard CSS Property#

In case you need to set a CSS property that is not listed in the Style Props list, you can use the sx prop and pass it whatever CSS property you desire.

One such example is the filter property:

<Image
  src='http://placekitten.com/200/300'
  alt='a kitten'
  sx={{ filter: 'blur(8px)' }}
/>

Defining CSS Custom Properties#

Custom CSS properties can be defined via the sx prop as well:

<Box sx={{ '--my-color': '#53c8c4' }}>
  <Heading color='var(--my-color)' size='lg'>
    This uses CSS Custom Properties!
  </Heading>
</Box>

Creating Nested Selectors#

To create complex, nested selectors, you can use utilize the & operator. The & in selector will get resolved to unique className that is assigned the component you put sx on.

For the following example you could also use the _groupHover shorthand prop.

<Box borderWidth={2} borderColor='purple.500' p={5} className='my-box'>
  <Heading size='lg'>
    Hover the box...
    <Box
      as='span'
      color='red.500'
      sx={{
        '.my-box:hover &': {
          color: 'green.500',
        },
      }}
    >
      And I will turn green!
    </Box>
  </Heading>
</Box>

Custom Media queries#

<Box
  sx={{
    '@media print': {
      display: 'none',
    },
  }}
>
  This text won't be shown when printing this page.
</Box>