Responsive styles#

You can pass breakpoints from the theme as responsive attributes inside your style props to apply the style for a particular viewport.

In this example, the background of the box will bed red until the max desktop width is reached. It will then fallback to the default.

This is a box

Editable example

<Box
  backgroundColor={{
    default: 'primary',
    'max-desktop': 'red'
  }}
  color="white"
>
  This is a box
</Box>

<Box
  backgroundColor={{
    default: 'primary',
    'max-desktop': 'red'
  }}
  color="white"
>
  This is a box
</Box>

On this page