React JS: как использовать media queries в styled components

наверх

Всем привет!

Media Queries в styled components работают точно так же, как и в обычном CSS.

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

Ниже рассмотрим небольшой пример.

Что мы сделаем?

Сделаем простую страницу, которая будет адаптироваться под размер экрана устройства.

Код можно посмотреть на Code Sandbox.

Как сделать страницу адаптивной используя styled components?

Нужно определить брейкпоинты в JS объекте
Определеить девайс для каждого брейкпоинта используя обычный media queries синтаксис
Применить правила @media в styled components

#1 Определяем брейкпоинты и девайсы

Определим брейкпоинты:

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

Затем создадим правило media query для каждого девайса.

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})`
};

#2 Сделаем компоненты адаптивными

Приложение имеет следующую корневую структуру:

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

Чтобы компоненты стали адаптивными, нужно обновить:

<Page> должен иметь максимальную ширину (width)
<Card> должен отображать текст под картинкой на небольших экранах

Для <Page> мы можем легко добавить max-width в зависимости от девайса:

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} { 
    max-width: 800px;
  }

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

А для <Card> нужно обновить 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;
  }
`;