The sx prop

Define your custom style while having access to theme tokens.

Usage

The sx prop provides a superset of CSS. It’s like the style attribute, but supports media queries, nesting, and theme-aware values. To find out which properties are theme-aware, checkout Style Props.

Although it's considered an escape hatch, below are a few cases where it is needed.

Defining any standard CSS property

When you need to set a CSS property that is not available as a style prop, you can use the sx prop and pass it whatever CSS property you desire.

One such example is the filter property:

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

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

Defining CSS custom properties

CSS custom properties can be defined via the sx prop.

tsx
<Box sx={{ "--my-color": "#6366f1" }}>
  <Heading color="var(--my-color)" size="2xl">
    This uses CSS Custom Properties!
  </Heading>
</Box>

tsx
<Box sx={{ "--my-color": "#6366f1" }}>
  <Heading color="var(--my-color)" size="2xl">
    This uses CSS Custom Properties!
  </Heading>
</Box>

Creating nested selectors

Use the & operator like in sass to create nested selectors.

tsx
<Box border="1px solid royalblue" p={5} class="my-box">
  <Heading size="2xl">
    <span>Hover the box...</span>
    <Box
      as="span"
      color="tomato"
      sx={{
        ".my-box:hover &": {
          color: "mediumseagreen",
        },
      }}
    >
      <span>And I will turn green!</span>
    </Box>
  </Heading>
</Box>

tsx
<Box border="1px solid royalblue" p={5} class="my-box">
  <Heading size="2xl">
    <span>Hover the box...</span>
    <Box
      as="span"
      color="tomato"
      sx={{
        ".my-box:hover &": {
          color: "mediumseagreen",
        },
      }}
    >
      <span>And I will turn green!</span>
    </Box>
  </Heading>
</Box>

Creating custom media queries

You can also create custom media queries with sx.

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

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