TL;DR

Media queries with styled components work the same as in CSS!

const CardWrapper = styled.div`
  display: flex;
  flex-direction: row;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

If you want a more involved example with defining different device sizes and such, continue below.

What we’ll build

I already created a simple web page that is not responsive:

Non responsive website

Edit Styled components media queries (before)

So how to make it responsive using styled components?

  1. Define the breakpoints as a Javascript object
  2. Define the devices for each breakpoint using the usual media query syntax
  3. Apply the @media rules as usual in the styled components

Define the breakpoints & devices

I chose to create one breakpoint for each size used in the Chrome Dev Tools:

const size = {
  mobileS: '320px',
  mobileM: '375px',
  mobileL: '425px',
  tablet: '768px',
  laptop: '1024px',
  laptopL: '1440px',
  desktop: '2560px'
}

Then, based on the size, I created a media query for each device supported. Notice how the code uses just plain Javascript objects for this and taking advantage of ES6 template strings & string substitution.

export const device = {
  mobileS: `(min-width: ${size.mobileS})`,
  mobileM: `(min-width: ${size.mobileM})`,
  mobileL: `(min-width: ${size.mobileL})`,
  tablet: `(min-width: ${size.tablet})`,
  laptop: `(min-width: ${size.laptop})`,
  laptopL: `(min-width: ${size.laptopL})`,
  desktop: `(min-width: ${size.desktop})`,
  desktopL: `(min-width: ${size.desktop})`
};

Update the components to adapt based on device size

The root of the application consists of the following hierarchy:

const App = () => (
  <Page>
    <Hello name="CodeSandbox" />
    <Card withPictureOf="cats" />
    <Card withPictureOf="coffee" />
    <Card withPictureOf="oranges" />
  </Page>
);

In other to make the page responsive, two components need to be updated:

  • The Page needs to have maximum width
  • The Card needs to show the text beneath the image on small devices

For the page, this can be easily achieved by just specifing different max-width based on device:

import styled from 'styled-components';
import { device } from './device';

const Page = styled.div`
  margin: auto;
  font-family: "sans-serif";
  text-align: center;

  @media ${device.laptop} {  // -> "@media (min-width: ${size.laptop})" -> "@media (min-width: 1024px)"
    max-width: 800px;
  }

  @media ${device.desktop} {
    max-width: 1400px;
  }
`;

And for the Card, it’s a matter of updating the flex-direction:

import { device } from './device';

const CardWrapper = styled.div`
  display: flex;
  // Mobile friendly by default
  flex-direction: column;

  border: 1px solid gray;
  box-shadow: 5px 5px #ccc;
  padding: 10px;
  margin: 10px;

  // Switch to rows on large devices
  @media ${device.laptop} {
    flex-direction: row;
  }
`;

That’s it!

The page now correctly updates based on the device size!

Non responsive website

Edit Styled components media queries (after)

Do you still have questions about how to use media queries with styled components? Let me know in the comments below.

Comments