When building modern user interfaces with MUI, you often need your components to look good across a variety of device sizes. The sx prop makes this easy by allowing you to specify responsive values using breakpoint keys. These breakpoints—xs, sm, md, lg, and xl—correspond to different screen sizes, so you can adapt your styling as the viewport changes.

Suppose you want a component's font size and padding to adjust based on the screen width. You can pass an object to the sx prop where each key is a breakpoint, and each value is the style for that breakpoint. For example, you might want smaller text and padding on mobile devices, but larger ones on desktops.

Here is how you can set responsive fontSize and padding using the sx prop:

In this example:

• The fontSize is 12 on extra-small screens (xs), and 18 on medium screens (md) and up;
• The p (shorthand for padding) is 1 on extra-small screens, and 2 on small screens (sm) and up.

The sx prop interprets these breakpoint keys so that your styles automatically adjust as the screen size changes. When you provide an object with keys like xs, sm, md, lg, or xl, MUI applies the corresponding value at that breakpoint and up. This approach lets you write adaptive styling logic directly within your component, keeping code concise and readable. Using responsive values in the sx prop is a powerful way to ensure your UI remains consistent and accessible on all devices, without having to write separate CSS or use media queries manually.