Next.js: [Question] styled components or styled jsx

[MarcMagnin]

Hi,

I'v started to investigate around styling but I can't figure out which one to use.
Any recommendation is welcome!

Regards,
Marc

[timneutkens]

@MarcMagnin https://github.com/zeit/next.js#built-in-css-support obviously we recommend styled-jsx 😄 github.com/zeit/styled-jsx

[sedubois]

@timneutkens styled-jsx doesn't seem to be maintained very actively (but that might also be the case of styled-components, don't know?). Do you know what are the plans behind? And what are the pros/cons between styled-jsx and styled-components v2?

[MarcMagnin]

Cheers guys, good question @sedubois cheers!

[thierryc]

I use styled-jsx. It is very well integrated into Next. styled-components can be a good alternative too. More complexe. I like the styled-jsx simplicity. Good Code.

[jaydenseric]

Styled Components can handle single element components such as img easy-peasy, but styled-jsx always needs a container that is capable of holding children for the style element. See https://github.com/zeit/styled-jsx/issues/169. If you are fine with that limitation, styled-jsx is easier to add to existing components, is much less complex and therefore easier on bundle size.

[arunoda]

Closing this since this is not exactly a question. But feel free to discuss more :)

[dmoli]

What do you think about that used both together? 🤔

[julmot]

@MarcMagnin For those of you deciding this today: I'm going to use styled-components. Here are my reasons:

1. Nesting isn't supported by styled-jsx:
   
   The workaround would be to use the styled-jsx-plugin. However, as the description states:
   
   And due to the fact that there are only 23 stars, it's likely that they are bugs. So I would not use this in production. This also applies to the styled-jsx-postcss-plugin which is a Proof Of Concept plugin with 14 stars currently. Also note that these plugins are't offered by zeit itself
2. There's no PHPStorm/Webstorm syntax support. Either you'd have to say the editor that things inside <style> is CSS every time or add comments above: { /*language=CSS*/ } (ref).
3. Either you need to blow up your render function by the large <style> contents or you can separate it using this technique:
   
   However, this also means you need to declare your styles somewhere and always create the element AND the styled in the JSX. With styled-components you just need to declare your styled and the component, not declare <style> once again

To get started, head over to this project: https://github.com/zeit/next.js/tree/master/examples/with-styled-components

[MarcMagnin]

@julmot I've parked it a bit and I'll come back to it soon so I'm very grateful you gave your feedback!!
I've look around and heard about JSS, any thought on that one?

[julmot]

@MarcMagnin Yes I though about it but won't use it as it's basically JSON and not really for this use case.