Migrate to material-pigment-css using migrate docs

[kdichev]

these are the steps I did using the migrate to pigment css installation docs from mui documentation:

Step 1:
changed @pigment-css/react to "@mui/material-pigment-css in package.json

Step 2:
changed the theme object to use createTheme and the old way of defining theme and added transformLibraries: ["@mui/material"],

Step 3:
changed import "@pigment-css/react/styles.css" to import "@mui/material-pigment-css/styles.css"; in src/app/layout.tsx

Step 4:
changed import { styled } from "@pigment-css/react"; to import { styled } from "@mui/material-pigment-css"; and changed how the theme object is used

[kdichev]

Key takeaways from these 4 steps:

I successfully integrated pigment-css with @mui/material without losing any features. The confusion stemmed from the Getting Started with Pigment CSS and Migrating to Pigment CSS documentation. It appears that, for those intending to use pigment-css with @mui/material, the "Migrating to Pigment CSS" guide is more relevant, while the "Getting Started" guide seems tailored to using pigment-css as a standalone styling solution. It would be helpful if the documentation clarified this distinction. Because of how the theme object is utilized in each approach, they cannot be used interchangeably, which adds to the confusion.