MUI sx Prop and styled() API

Overview

MUI provides two primary APIs for styling components: the sx prop (inline, one-off styles with full theme access) and the styled() function (reusable styled components built on Emotion). Choose based on reuse: sx for single-use overrides, styled() for components used more than once.

sx Prop

The sx prop accepts a superset of CSS where values can reference theme tokens, respond to breakpoints, and use shorthand aliases. It is available on every MUI component and on the Box primitive.

Basic usage