Often when working on responsive layouts, it's useful to adjust styles across a singular dimension – such as font-size, margin, padding, and width. Instead of manually managing media queries and adding nested style objects throughout a code base, styled-system offers a convenient shorthand syntax for adding responsive styles with a mobile-first approach. While this syntax can seem odd at first, it can become a powerful way to manage responsive typography and layouts.
All style utilities add props that accept arrays as values for mobile-first responsive styles.
<Box
width={[
1, // 100% below the smallest breakpoint
1/2, // 50% from the next breakpoint and up
1/4 // 25% from the next breakpoint and up
]}
/>
// responsive font size
<Box fontSize={[ 1, 2, 3, 4 ]} />
// responsive margin
<Box m={[ 1, 2, 3, 4 ]} />
// responsive padding
<Box p={[ 1, 2, 3, 4 ]} />
Alternatively you can define your breakpoints as an object
e.g.
// theme.js
export default {
breakpoints: {
sm: 0, // zero represents the default (for mobile-first approach)
md: '48em',
lg: '80em'
}
}
And then pass an object
to configure how the component should respond at these breakpoints:
<Box
width={{
sm: 1, // 100% by default (no media query)
md: 1/2, // 50% at 'md' (48em and up)
lg: 1/4 // 25% at 'lg' (80em and up)
}}
/>
Note: it isn't necessary to set a value for each breakpoint. The following would only apply 50% width at the md
breakpoint:
<Box width={{ md: 1/2 }} />