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:

<Box
  src="http://placekitten.com/200/300"
  alt="a kitten"
  sx={{ filter: 'blur(8px)' }}
/>
<Box
  src="http://placekitten.com/200/300"
  alt="a kitten"
  sx={{ filter: 'blur(8px)' }}
/>
content_copy
Copy
live example

Defining CSS Custom Properties

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

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

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">
  <Box size="lg">
    Hover the box...
    <Box
      as="span"
      color="red.500"
      sx={{
        '.my-box:hover &': {
          color: 'green.500',
        },
      }}
    >
      And I will turn green!
    </Box>
  </Box>
</Box>
<Box borderWidth={2} borderColor="purple.500" p={5} className="my-box">
  <Box size="lg">
    Hover the box...
    <Box
      as="span"
      color="red.500"
      sx={{
        '.my-box:hover &': {
          color: 'green.500',
        },
      }}
    >
      And I will turn green!
    </Box>
  </Box>
</Box>
content_copy
Copy
live example

Custom Media queries

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