[examples] Update gatsby example to use @material-ui/* next

[mnajdova]

This PR updates the gatsby example project to use next version of @material-ui/* packages. It adds the @emotion/* packages and the gatsby-plugin-emotion plugin.

[mui-pr-bot]

No bundle size changes comparing a0acea9...84f0ef8

Generated by 🚫 dangerJS against 84f0ef8

[oliviertassinari]

https://github.com/mui-org/material-ui/blob/a0acea943ad3591c6d38d814966c1bfb273fb937/examples/gatsby/src/pages/index.js#L14

v5-alpha instead?

[oliviertassinari]

I had a look at what's done by other libraries using emotion. You have:

• gatsby-plugin-theme-ui
• gatsby-plugin-chakra-ui

It seems that they are closer to gatsby-theme-material-ui than gatsby-plugin-material-ui.

I'm surprised that gatsby-plugin-emotion doesn't try to inline the CSS in the head as styled-components or @material-ui/styles do.

[mnajdova]

I had a look at what's done by other libraries using emotion. You have:

• gatsby-plugin-theme-ui
• gatsby-plugin-chakra-ui

It seems that they are closer to gatsby-theme-material-ui than gatsby-plugin-material-ui.

I'm surprised that gatsby-plugin-emotion doesn't try to inline the CSS in the head as styled-components or @material-ui/styles do.

I am looking next on the gatsby-theme example project. Should we invest into creating our own custom plugin? Or should we wait and see if the community will come up with some plugin that works better maybe? I can't see at this moment the benefits or downsides of this one to be honest.

[oliviertassinari]

I would be leaning toward waiting on authoring a custom Gatsby plugin too.

The example we are editing shows how to implement most of it user land. I think that the most interesting part of our v4 Gatsby plugin is the SSR inlining. With emotion, it becomes optional.
Also, @hupe1980 has solved the problem well so far.

The Gatsby plugin was interesting for us because we can use it to analyze if we are doing great or not in the Gatsby environment. It would help optimize for: are people using Material-UI with Gatsby? Now, we don't have that metric with Next.js and that's probably fine.