Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
handling breakpoints /w emotion
/** @jsx jsx */
import { jsx, css } from '@emotion/core'
const breakpoints = {'mobile': 320, 'tablet':768, 'desktop':992, 'desktop-xl': 1200};
const mq = (size) => `@media (min-width: ${breakpoints[size]}px)`
render(
<div>
<div
css={{
color: 'green',
[mq('mobile')]: {
color: 'gray'
},
[mq('tablet')]: {
color: 'hotpink'
}
}}
>
Some text!
</div>
<p
css={css`
color: green;
${mq('mobile')} {
color: gray;
}
${mq('tablet')} {
color: hotpink;
}
`}
>
Some other text!
</p>
</div>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment