How to use CSS Media Query Breakpoint in Styled-Components

#javascript #css #react #webdev

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

Top comments (12)

Sonahang Rai • Dec 9 '21

Kada I am a human now 😀

Letam • Jan 14 '22

This is amazing

Jordan Finneran • Apr 1 '21

You could also achieve this using CSS Variables which would mean you could ship less Javascript. 🎉
developer.mozilla.org/en-US/docs/W...

Lars Ejaas • Jul 2 '21

Nobe, unfortunately you cannot use CSS variables to set the breakpoint for the media query. env() variables will fix this, but they aren't ready yet - not sure when they will be? But yeah, you can of course use the css variables inside the styling all you want.