TYPESCRIPT

define a media query in styled components

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

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

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

media queries in styled components

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

media query with styled-components

// You first need to install 'styled-components' from your package manager

import { useState } from 'react'
import styled from 'styled-components'

const DivContainer = styled.div`
    border-radius: .5rem;
    padding-block: .5rem;
    box-shadow: 1px 1px 5px rgba(25, 25, 25, .65);
    
    // Media query
      @media (min-width: 768px) {
        width: auto;
      }
`

const InputControl = styled.input`
	width: 80%;
    padding: .5rem;
    border-radius: .5rem;
    margin-inline: auto;
    background-color: ${({inputLength}) => inputLength < 1 
                                          ? 'maroon': 'transparent' };
    border: ${({inputLength}) => inputLength < 1 
                                		  ? '1px solid red': 'none' };
    color: ${({inputLength}) => inputLength < 1 ? 'white': 'black' };
    
    // Media query
      @media (min-width: 768px) {
        width: 100%;
      }
`

const userName = () => setUserName(userName)

const Card = () => (
  const [ userName, setUserName] = ('');

  // Instead of regular <div></div> Tag
  // You wrap your elements around your 'custom styled component'
  <DivContainer>
  	<InputControl inputLength={userName.length} 
		value={userName} 
		onChange{handleUserName} 
		placeholder="Enter your name" />
  </DivContainer>
)

// With love @kouqhar