Responsive Styles

Instead of manually adding @media queries and adding nested styles throughout your code, you can provide array values to add mobile-first responsive styles.

We use the @media(min-width) media queries to ensure values are mobile-first.

<Fragment>
  <Box
    height="40px"
    bg="teal.400"
    width={[
      '100%', // base
      '50%', // 480px upwards
      '25%', // 768px upwards
      '15%', // 992px upwards
    ]}
  />
  {/* responsive font size */}
  <Box fontSize={['sm', 'md', 'lg', 'xl']}>Font Size</Box>
  {/* responsive margin */}
  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
  {/* responsive padding */}
  <Box bg="papayawhip" p={[2, 4, 6, 8]}>
    Padding
  </Box>
</Fragment>

This works for every style props in the theme specification, which means you can change the style of most properties at a given breakpoint.

What it does

This shortcut is an alternative to writing media queries out by hand. Given the following:

<Box width={['100%', 1 / 2, 1 / 4]} />
or
<Box width={['100%', 0.5, 0.25]} />

It'll generate a CSS that looks like this

.Box {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box {
    width: 25%;
  }
}

NOTE: In the shortcut example '100%' is used instead of 1 because in the default Chakra UI theme, theme.sizes[1] = 0.25rem. This means that using a prop like width={1} will render a width of 4px and not '100%'

The equivalent of this style if you passed it as an object.

<Box width={{ base: 1, sm: 1 / 2, md: 1 / 4 }} />

Demo

Here's a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens (resize your browser to see it in action):