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.
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
Defining CSS Custom Properties#
Custom CSS properties can be defined via the
sx prop as well:
This uses CSS Custom Properties!
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
For the following example you could also use the