Media Query in styled-components

breakpoints.js

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

const size = {
  small: 400,
  medium: 960,
  large: 1140,
};
const mediaQuery = Object.keys(size).reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media (min-width: ${size[label]}px) {
      ${css(...args)}
    }
  `;

  return acc;
}, {});


//Usage

const Header = styled.div`
${mediaQuery.small`
  background:red;
`}
`