Styled Component CSS Prop Not Working w/ Next.js

If the css styled-components prop isn’t working in Next.js, most answers will point you to the babel plugin (‘babel-plugin-styled-components’) not working, in a bug state, or config problem.

If you’re using the Next.js custom compiler which replaces Babel, the current version simply does not support the css prop. https://nextjs.org/docs/advanced-features/compiler

Either accept slower builds by bypassing the custom compiler with a .babelrc file or find ways around using the css prop.

I basically only use the css prop for defining local css vars, so just pass those vars to the styled component instead if you want to lean on its css engine.

You can always use regular old style as well, if you don’t need anything offered by styled components like selectors.

Leave a Comment