DEV Community

Cover image for Better Reusable Media Queries on Emotion

Better Reusable Media Queries on Emotion

Rodrigo Figueroa on February 20, 2019

When wanting to use reusable media queries on Emotion you get in the official docs the following example: /** @jsx jsx */ import { jsx, css } fr...
Read full post
Collapse
 
dance2die profile image
Sung M. Kim •

mq('small') does look more readable than mq[0] 👍
increasing the readability & maintenance cost 🙂

Collapse
 
valdelama profile image
Dan Winer •

Can't you just do:

function mq(n) {
  return `@media (min-width: ${bp[n]}px)`;
}
Enter fullscreen mode Exit fullscreen mode

?

Collapse
 
aamirafridi profile image
Aamir Afridi •

indeed. with type safety

const mq = (n: keyof typeof bp) => `@media (min-width: ${bp[n]}px)`;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rmcsharry profile image
Richard McSharry •

Fantastic idea, thanks for sharing it, very useful indeed!