title: How to Create Dynamic Media Queries with Styled-Components?
body: <p>I am trying to use the following approach below to not cause memory overload:</p>
  
  <pre><code> ${MediaXS} {
      font-size: 0.77rem;
    }
  </code></pre>
  
  <p>Instead of using this approach below, which causes memory problems because it is an array:</p>
  
  <pre><code> $ {MediaXS`
      color: red
    `}
  </code></pre>
  
  <p>But I don't know the correct way to export to use with the first example, what should I do?</p>
  
  <p><strong>MY CODE:</strong></p>
  
  <pre><code>import { css } from "styled-components";
  
  export const MediaXS = css`
    @media only screen and (min-width: 320px) {
    }
  `;
  
  export const MediaSM = css`
    @media only screen and (min-width: 576px) {
    }
  `;
  
  export const MediaMD = css`
    @media only screen and (min-width: 768px) {
    }
  `;
  
  export const MediaLG = css`
    @media only screen and (min-width: 992px) {
    }
  `;
  
  export const MediaXL = css`
    @media only screen and (min-width: 1200px) {
    }
  `;
  </code></pre>