emotionJS media queries example with facepaint

emotion_js_media_queries

//this part needs to be defined only once in an app
//media_queries_definition.js

import facepaint from 'facepaint'
const breakpoints = [768, 1200];

export const mq = facepaint(
    breakpoints.map(bp => `@media (min-width: ${bp}px)`)
)


// some_component.styles.js
import styled from 'react-emotion'
import {mq} from 'css/general_styles.styles';
export const MyButton = styled('div')`
  margin-left:auto;
  margin-right: auto;
  background-color: ${props => props.primary ? "blue" : "black"}
  ${mq({
      height: [25, 50, 100],
      width: [100, 200, 300],
  })}
`;


// some_component.js
import React from 'react';
import {MyButton} from './some_component.styles.js'
const SomeComponent= () => {
    return (
        <MyButton primary> click me </MyButton>
    );
};