How to use CSS Media Query Breakpoint in Styled-Components
#javascript#css#react#webdev
Cagatay Unal

Cagatay Unal @cagatayunal

About: Code Padawan 🚀

Location:
Antalya
Joined:
Dec 6, 2020

How to use CSS Media Query Breakpoint in Styled-Components

Publish Date: Mar 30 '21
195 12

Create and Use Breakpoint in Styled-Components

Step 1: Create breakpoints.js and define size, device variables
You can change breakpoints size and add new size.

const size = {
 xs: ‘320px’,
 sm: ‘768px’,
 lg: ‘1200px’,
}
const device = {
 xs: `(min-width: ${size.xs})`,
 sm: `(min-width: ${size.sm})`,
 lg: `(min-width: ${size.lg})`
}
export default {size, device}
Enter fullscreen mode Exit fullscreen mode

Step 2: Use this breakpoints in Styled-Components

import breakpoint from 'Commons/breakpoints';
...
const Component = styled.div`
    @media only screen and ${breakpoint.device.xs}{
        display: none;
    }
    @media only screen and ${breakpoint.device.sm}{
        display: flex;
    }
    @media only screen and ${breakpoint.device.lg}{
        display: flex;
    }
`;
Enter fullscreen mode Exit fullscreen mode

Comments 12 total

Add comment