Managing Global Styles with styled-jsx

 • 

There's a bug, it might exist in styled-jsx but it certainly exists in styled-jsx as used by nextjs, where you can't have multiple <style jsx global> tags -- only the first one gets used. A nice, not very hacky solution, (assuming you're using inline-loader or raw-loader for CSS):

// global-styles.js
import foo from 'foo/style.css'
import bar from 'bar/style.css'
export default foo + bar

import GlobalStyles from './global-styles'
// in component
<style global jsx>{ GlobalStyles }</style>