styled components media query code example

Example 1: define a media query in styled components

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

Example 2: conditional styled components with media query

import styled, { css } from 'styled-components'

const YourComponent = styled.div`
  //...
  
  ${props => props.isFirstPage && css`
     @media only screen and (max-width: 480px) {
       padding: 8px 8px 24px 8px
     }
  `}
`;

Example 3: media queries in styled components

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

Example 4: media queries in styled components

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