Styled-components media queries

github logo ・1 min read

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?

twitter logo DISCUSS
Classic DEV Post from Jan 17

25 years of coding, and I'm just beginning

I've come to a conclusion that I have nothing to show for my 25 years of coding. I am ready to begin and I have a plan.

Rafal Lesniak profile image

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️

(There is also a pink mode)