Interpolating functions in css calls

[josephmarkus]

I would like to use a helper function for media queries that essentially wraps my CSS.

My problem is when this function attempts to style based on props.

Although I know that styled-components has only been a source of inspiration for emotion, I have a working example here: https://codesandbox.io/s/breakpoints-styled-components-64yox?file=/src/App.js

Equivalent of that in Emotion throws an error: https://codesandbox.io/s/breakpoints-emotion-js-nf58w?file=/src/App.js

I saw this suggested solution here - #1085 (comment) - but I'm unsure how to correctly apply this when my styles can have generic conditionals inside them.

Note that the example uses Emotion v9

Any help would be much appreciated 🙏

[Andarist]

A working solution for Emotion 9: https://codesandbox.io/s/breakpoints-emotion-js-umbcd?file=/src/App.js