Blitz: Add Material-UI example app

[cr101]

Example project that uses Material-UI

[Skn0tt]

Thank you for that idea, sounds good to me 👍🏻 Would you be open to provide a PR? 🙈

[JoseRFelix]

I would love to take this issue.

[flybayer]

Awesome @Jfelix61! Let us know if you need any help!

[lednhatkhanh]

I was trying the exact same thing and stumbled upon a problem: Everything I put inside the Head tag of _app.tsx and _document.tsx are not being loaded, I don't know whenever this is my mistake or not, please refer to this repo for more details: https://github.com/lednhatkhanh/blitz-shop just clone and run blitz start since it doesn't have any data yet.

You will see that the button has no style at all, the favicon and title are not being shown either.

[lednhatkhanh]

UPDATE: So rendering <DocumentHead /> allows the style to be rendered, but now the button doesn't have the ripple effect when being clicked at all.

[JoseRFelix]

The implementation is almost done, and Material UI works. However, I'm getting a mismatch of classes between the server and the client.

Tried with vanilla Next.js and it works just fine. Something must be going on with blitz code generation. Any ideas @flybayer?

[JoseRFelix]

After some long investigation. It seems it is a problem with React's experimental version. 16.13.1 seems to be working just fine. Most likely concurrent mode is not very compatible with Material UI server side rendering styles yet.

[JoseRFelix]

UPDATE: So rendering <DocumentHead /> allows the style to be rendered, but now the button doesn't have the ripple effect when being clicked at all.

I am getting the same problem with the ripple effect. I have disabled Blitz config and tried to run the server and the ripple works, therefore something must be going on in blitz/server. Will be investigating...

[flybayer]

Closed in #840!

You can now run:

blitz install material-ui