super-query-demo-custom-breakpoints-implementation.js

import styled from 'styled-components';
import SuperQuery, { configureBreakpoints } from '@themgoncalves/super-query';

const customBreakpoints = {
  extraSmall: 360,
  small: 640,
  medium: 960,
  large: 1024,
  extraLarge: 1200,
  superExtraLarge: 1600,
};

configureBreakpoints(customBreakpoints);

const Title = styled.h1`
  color: #666;
  font-size: 16px;
  SuperQuery().minWidth().superExtraLarge().css`
    font-size: 26px;
  `
`;