sx prop

In most cases, you should use style props to theme your component.

However in situations where style props cannot be used, such as third-party components, nested or pseudo selectors, you can fallback to the sx props.

The sx prop lets you add any valid CSS to an element, while using values from your theme to keep styles consistent. You can think of the style object that the sx prop accepts as a superset of CSS.

<div
  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)",
    // nested
    "> a": {
      color: "secondary",
    },
    // pseudo
    ":after": {
      content: '""',
      position: "absolute",
    },
  }}
/>
 
Copy

The sx prop comes from Theme UI. You can read more about it in the Theme UI docs.