Merge branch 'next' of https://github.com/mui/material-ui into exampl…

…es/material-pigment-css

docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md

@@ -76,7 +76,9 @@ const nextConfig = {
 /**
  * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
  */
-const pigmentConfig = {}; // we will refer to this later
+const pigmentConfig = {
+  transformLibraries: ['@mui/material'],
+};
 
 export default withPigment(nextConfig, pigmentConfig);
 ```
@@ -91,7 +93,9 @@ const nextConfig = {
 /**
  * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
  */
-const pigmentConfig = {}; // we will refer to this later
+const pigmentConfig = {
+  transformLibraries: ['@mui/material'],
+};
 
 module.exports = withPigment(nextConfig, pigmentConfig);
 ```
@@ -131,19 +135,20 @@ npm install --save-dev @pigment-css/vite-plugin
 yarn add -D @pigment-css/vite-plugin
 ```
 
-```bash pnpm
-pnpm add -D @pigment-css/vite-plugin
-```
-
 </codeblock>
 
-Next, open vite config file, usually named `vite.config.js`, and add the plugin:
+Next, open the Vite config file (usually named `vite.config.mjs` or `vite.config.js`) and add the plugin:
 
 ```js
 import { defineConfig } from 'vite';
 import { pigment } from '@pigment-css/vite-plugin';
 
-const pigmentConfig = {}; // we will refer to this later
+/**
+ * @type {import('@pigment-css/vite-plugin').PigmentOptions}
+ */
+const pigmentConfig = {
+  transformLibraries: ['@mui/material'],
+};
 
 export default defineConfig({
   plugins: [
@@ -153,6 +158,11 @@ export default defineConfig({
 });
 ```
 
+:::warning
+There is [a known issue with pnpm](https://github.com/mui/pigment-css/issues/176) that currently prevents the plugin from working correctly with this package manager.
+Until it's resolved, you must use npm or yarn instead.
+:::
+
 Finally, add the Pigment CSS stylesheet to the top of the main file.
 
 ```diff title="src/main.(js|tsx)"
@@ -173,14 +183,16 @@ Integrating Pigment CSS with Material UI requires you to configure the theme t
 Add the following code to your [Next.js](#nextjs) or [Vite](#vite) config file:
 
 ```diff
-+import { extendTheme } from '@mui/material';
++import { createTheme } from '@mui/material';
 
-+const pigmentConfig = {
-+  theme: extendTheme(),
-+};
+ const pigmentConfig = {
+   transformLibraries: ['@mui/material'],
++  theme: createTheme(…parameters if any),
+ };
 ```
 
-If you don't have a custom theme, you are ready to go. Start a development server by running:
+If you have a custom theme, follow the [theme migration instructions](#migrating-custom-theme) next.
+Otherwise you're now ready to start the development server:
 
 <codeblock storageKey="package-manager">
 
@@ -600,6 +612,9 @@ declare global {
     interface HTMLAttributes<T> {
       sx?: SxProps<Theme>;
     }
+    interface SVGProps<T> {
+      sx?: SxProps<Theme>;
+    }
   }
 }
 ```