DocumentationBlocks LibraryGuidesGitHub

The `sx` prop

The sx prop lets you style elements inline, using values from your theme.

In most cases, you can 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.

// 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",

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

Color modesHooks

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub