const Demo = styled.div`
  ${getResponsiveTextSize({
    default: 'l',
    '@media (min-width: 700px)': 'xl',
    '@media (min-width: 1200px)': 'xxl',
  })};

  ${getResponsiveSpace('margin', {
    default: 'm',
    '@media (min-width: 700px)': 'l',
    '@media (min-width: 1200px)': 'xl',
  })};
`;

How to use responsive props

Some props accept an object with responsive values

<Box padding="xl" />

<Box
  padding={{
    default: 'xl',
    mobile: '20px',
    tablet: 5,
  }}
/>

Props that allow responsive object

Responsive props are used for spacing, dimension, text sizes and layout changes.
To check which props allow a responsive object, check the props table for each component, and look for the responsive badge. For example, see the Box component props table.

Examples

Space

    <Box
      borderSide="all"
      borderColor="fade5"
      padding={{
        default: 'xl',
        mobile: 'm',
        tablet: 'l',
      }}
    >
      Content
    </Box>
  

Dimension

    <Box
      borderSide="all"
      borderColor="fade5"
      width={{
        default: 20,
        mobile: 'unset',
        tablet: 40,
      }}
      padding="s"
    >
      Content
    </Box>
  

Text

    <Text
      size={{
        default: 'l',
        mobile: 'xl',
        tablet: 'xxl',
      }}
      align={{
        default: 'left',
        mobile: 'right',
        tablet: 'center',
      }}
    >
      Content
    </Text>
  

Layout

    <Arrange
      gap={{
        default: 'l',
        tablet: 's',
      }}
      columns={{
        default: '1fr 3fr',
        tablet: 'repeat(2, 1fr)',
        mobile: '1fr',
      }}
    >
      <Box borderSide="all" borderColor="fade5" padding="s">A</Box>
      <Box borderSide="all" borderColor="fade5" padding="s">A</Box>
    </Arrange>

JS media queries

    () => {
      const color = useMedia(
        ['(max-width: 700px)', '(max-width: 1200px)'], 
        ['red', 'green'], 
        'blue'
      );
      return (
        <Box backgroundColor={color} padding="s">{color}</Box>
      )
    }
  