[examples] Add material-ui-pigment-css for Next.js and Vite

[siriwatknp]

There is a problem with pnpm for Vite example (npm and yarn work fine) but it's not a blocker for this PR.

Blocked by mui/pigment-css#193 and mui/pigment-css#191.

• I have followed (at least) the PR section of the contributing guide.

[aarongarciah]

Nice job. Did a quick first pass and left some comments.

---

Visually speaking, some stuff we could improve:

• Headings in the bullet list look a bit too large.
• Emojis and headings look misaligned.
• The bullet list could be moved down so its top is aligned with the main title.

From this

to something like this (quick sketch)

---

Unrelated to this PR

• The style attribute is not supported in PigmentGrid
  
• Passing the sx prop to PigmentGrid results in the following error in the Next.js demo:
  
• Passing a shortcut to the sx prop results in a TS error, but the style gets applied:
  

[aarongarciah]

Is this accurate? Wouldn't Pigment also extract styles from styled, css, sx even if they're non-Material UI components?

[siriwatknp]

It's accurate, my intention is to point out the integration. We can add more to cover your point, what do you have in mind?

[aarongarciah]

With the current wording some developers might get confused and think that Pigment CSS only works for Material UI components.

[siriwatknp]

Passing the sx prop to PigmentGrid results in the following error in the Next.js demo:

@brijeshb42 seems like @mui/material-pigment-css is not picked up by the plugin.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43065--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 1c4a562

[siriwatknp]

@mui/core ready for a final review.

[ZeeshanTamboli]

I tested the examples on StackBlitz instead of running them locally. The Next.js example throws an error: https://stackblitz.com/github/siriwatknp/material-ui/tree/examples/material-pigment-css/examples/material-ui-pigment-css-nextjs-ts.

However, the Vite example works fine: https://stackblitz.com/github/siriwatknp/material-ui/tree/examples/material-pigment-css/examples/material-ui-pigment-css-vite-ts?file=README.md.

[siriwatknp]

I tested the examples on StackBlitz instead of running them locally. The Next.js example throws an error:

This will be fixed by #43237

[ZeeshanTamboli]

Just realized that both examples can be added to the Example Projects page in the documentation.

[siriwatknp]

@aarongarciah Would you mind do a final review on this? All issues have been resolved.

[aarongarciah]

@siriwatknp I'm experiencing these errors while trying to run the projects locally. I copied the example folder and ran pnpm i & pnpm dev in both cases.

Next.js

Vite

[o-alexandrov]

@aarongarciah probably because of pnpm issue described in the issue's description:

There is a problem with pnpm for Vite example (npm and yarn work fine) but it's not a blocker for this PR.

[aarongarciah]

@o-alexandrov ouch! I totally forgot about it, thanks.

[aarongarciah]

@siriwatknp looks cool. I couldn't get the Next.js example to work. I tried with pnpm, npm and yarn v1 with no luck. I receive this error:

[siriwatknp]

@siriwatknp looks cool. I couldn't get the Next.js example to work. I tried with pnpm, npm and yarn v1 with no luck. I receive this error:

That issue is fixed by #43237. It has not been released yet but you can test with:

"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/cd5410b1/@mui/material"

I tested and it works on my end.

[aarongarciah]

@siriwatknp awesome job!

That issue is fixed by #43237. It has not been released yet but you can test with:

Tested with the fixed version and works well.