---
title: The `sx` Prop
description:
  The sx prop lets you style components inline, using your theme tokens.
category: 'features'
---

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](/docs/styled-system/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](/docs/styled-system/style-props) list, you can use the `sx` prop
and pass it whatever CSS property you desire.

One such example is the `filter` property:

```jsx
<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:

```jsx
<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](/docs/styled-system/style-props#pseudo).

```jsx
<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

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