title: Media Queries in Emotion Styled Components
body: <p>The Emotion docs tell us how to <a href="https://emotion.sh/docs/media-queries" rel="noreferrer">make reusable media queries</a> that works in the css prop.  This allows us to make the following queries in a css prop:</p>
  
  <pre><code>&lt;div
    css={{
      color: 'green',
      [mq[0]]: {
        color: 'gray'
      },
      [mq[1]]: {
        color: 'hotpink'
      }
    }}
  &gt;
  </code></pre>
  
  <p>With <code>mq[0]</code> and <code>mq[1]</code> referring to the first two items in a breakpoints array.  For example:  <code>const breakpoints = [576, 768, 992, 1200]</code>.</p>
  
  <p>What's more, <a href="https://dev.to/bidah/better-reusable-media-queries-on-emotion---4dkk" rel="noreferrer">this article</a> takes it one step further, by showing up how to get named reusable media queries by using a breakpoint object.  It starts by making a similar function as per the emotion docs, but for objects:</p>
  
  <pre><code>const mq = n =&gt; {
    const bpArray = Object.keys(bp).map(key =&gt; [key, bp[key]]);
  
    const [result] = bpArray.reduce((acc, [name, size]) =&gt; {
      if (n === name) return [...acc, `@media (min-width: ${size}px)`];
      return acc;
    }, []);
  
    return result;
  };
  </code></pre>
  
  <p>This then allows us to create a breakpoints object with named media queries:</p>
  
  <pre><code>// object
  const breakpoints = {
    sm: 500,
    md: 768,
    lg: 992,
    xl: 1200
  };
  
  
  // query
  ${mq('sm')} { 
    color: gray;
  }
  </code></pre>
  
  <p>So far, so good.</p>
  
  <p>I would now like to do something similar in an emotion styled component.  As such, I created an breakpoints object and the same function as mentioned in the above article.</p>
  
  <p>I then tried to use the short hand media query in my emotion styled component -- like this: </p>
  
  <pre><code>import styled from '@emotion/styled'
  
  const Container = styled.div`
    ${mq('sm')`max-width: 750px;`}
    ${mq('md')`max-width: 970px;`}
    ${mq('lg')`max-width: 1170px`}
  `
  </code></pre>
  
  <p>But when I try this, it does not work.  I get the following error message:</p>
  
  <pre><code>TypeError: Object(...) is not a function
  </code></pre>
  
  <p>Any idea why this is happening and what I can do to get it to work?</p>
  
  <p>Thanks.</p>