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:

a kitten
Editable Example

Defining CSS Custom Properties#

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

This uses CSS Custom Properties!

Editable 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.

Hover the box... And I will turn green!

Editable Example

Custom Media queries#

This text won't be shown when printing this page.
Editable Example

Proudly made inNigeria by Segun Adebayo