Material-ui: SSR with Material-UI, styled-components and Next.JS

[dmbaranov]

Problem description

I'd like to use Material-UI together with Styled-components and Next.JS. I setup my styled-components SSR according to this tutorial (https://www.styled-components.com/docs/advanced#server-side-rendering) and it works. But I can't make it work together with the example from your repository (https://github.com/callemall/material-ui/tree/v1-beta/examples/nextjs) due to it uses JSS. Do you know if it's possible to make it work with styled-components? Thanks!

[adrianmcli]

@dmt-13 have you ever figured out how to do this?

[dmbaranov]

@adrianmcli sorry for the long response. I haven't played with it for a long time since now, but as far as I remember, I had some success with it. I can't remember how I achieved it, but I can show you my repo where I store some code, so probably you'll be able find it out yourself :)

The code is located here, so send me an access request: https://bitbucket.org/dmt_13/learnnextjs

[adrianmcli]

Thanks! I was able to get it working as well, but it made my _document.js kind of hard to read. There's also the issue of Material-UI's styles being injected last.

[cyrus-za]

@oliviertassinari why is this issue closed? Just because you never used styled-components does not make this a non-issue.

[oliviertassinari]

@cyrus-za Nothing should prevent you from making styled-components work. This was a support question. StackOverflow is better suited for support.

[dmbaranov]

@cyrus-za and also I want to add to the answer above that it wasn't me who closed this issue.

[cyrus-za]

@dmbaranov sorry my bad. I meant to say @oliviertassinari. I updated it now.

@oliviertassinari Stackoverflow is not the right place for this as this is a compatibility issue.

See https://github.com/styled-components/styled-components/issues/1282 and https://github.com/styled-components/styled-components/issues/1146

[oliviertassinari]

styled-components interoperability with Material-UI is documented under this page: https://material-ui-next.com/guides/interoperability/#styled-components.