Styled-components media queries

In company we want to create some styled-component helper to write elegant media-queries and we are arguing which way to choose:

• with interpolated string like:

      styled.div`
        ${media.mobile`
          color: red
        `}
      `

• or returning only @media string fragment like (eg. @media (min-width: 100px):

      styled.div`
        ${media.mobile} {
          color: red
        }
      `

What disadvantages / caveats of this two approach?