Name: How to use CSS Media Query Breakpoint in Styled-Components
Rating: 3.4 (9141 reviews)
Author: cagatayunal

How to use CSS Media Query Breakpoint in Styled-Components

Cagatay Unal - Mar 30 '21 -

- Dev Community

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}

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