mui · siriwatknp · Jun 14, 2024 · May 15, 2024 · May 17, 2024 · May 17, 2024
diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -286,12 +286,10 @@ function App() {
 }
 ```
 
-For a server-side application, provide the same value to [`getInitColorSchemeScript()`](/material-ui/customization/css-theme-variables/usage/#server-side-rendering):
+For a server-side application, provide the same value to [`InitColorSchemeScript`](/material-ui/customization/css-theme-variables/usage/#server-side-rendering):
 
 ```js
-getInitColorSchemeScript({
-  defaultMode: 'dark',
-});
+<InitColorSchemeScript defaultMode="dark" />
 ```
 
 :::warning

diff --git a/docs/data/material/customization/css-theme-variables/usage/usage.md b/docs/data/material/customization/css-theme-variables/usage/usage.md
@@ -115,23 +115,42 @@ The structure of this object is nearly identical to the theme structure, the onl
 
 ## Server-side rendering
 
-Place `getInitColorSchemeScript()` before the `<Main />` tag to prevent the dark-mode SSR flickering during the hydration phase.
+Place `<InitColorSchemeScript />` before the `<Main />` tag to prevent the dark-mode SSR flickering during the hydration phase.
+
+### Next.js App Router
+
+Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) file:
+
+```jsx title="app/layout.js"
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <InitColorSchemeScript /> {/* must come before the <main> element */}
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
+```
 
 ### Next.js Pages Router
 
 Add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document) file:
 
-```jsx
+```jsx title="pages/_document.js"
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { getInitColorSchemeScript } from '@mui/material/styles';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 
 export default class MyDocument extends Document {
   render() {
     return (
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript /> {/* must come before the <Main> element */}
           <Main />
           <NextScript />
         </body>
@@ -158,7 +177,7 @@ const StyledComponent = styled('button')(({ theme }) => ({
 
 ## API
 
-### `<CssVarsProvider>` props
+### `<CssVarsProvider>` &nbsp;props
 
 - `defaultMode?: 'light' | 'dark' | 'system'` - Application's default mode (`light` by default)
 - `disableTransitionOnChange : boolean` - Disable CSS transitions when switching between modes
@@ -171,10 +190,9 @@ const StyledComponent = styled('button')(({ theme }) => ({
 - `mode: string` - The user's selected mode
 - `setMode: mode => {…}` - Function for setting the `mode`. The `mode` is saved to internal state and local storage; if `mode` is null, it will be reset to the default mode
 
-### `getInitColorSchemeScript: (options) => React.ReactElement`
-
-**options**
+### `<InitColorSchemeScript>` &nbsp;props
 
 - `defaultMode?: 'light' | 'dark' | 'system'`: - Application's default mode before React renders the tree (`light` by default)
 - `modeStorageKey?: string`: - localStorage key used to store application `mode`
 - `attribute?: string` - DOM attribute for applying color scheme
+- `nonce?: string` - Optional nonce passed to the injected script tag, used to allow-list the next-themes script in your CSP
diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+<InitColorSchemeScript nonce="foo-bar" />;
diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+describe('InitColorSchemeScript', () => {
+  const { render } = createRenderer();
+
+  it('should render as expected', () => {
+    const { container } = render(<InitColorSchemeScript />);
+    expect(container.firstChild).to.have.tagName('script');
+  });
+});
diff --git a/packages/mui-material/src/InitColorSchemeScript/index.ts b/packages/mui-material/src/InitColorSchemeScript/index.ts
@@ -0,0 +1 @@
+export { InitColorSchemeScript as default } from '../styles/CssVarsProvider';
diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -1,4 +1,3 @@
-'use client';
 import * as React from 'react';
 import { unstable_createCssVarsProvider as createCssVarsProvider, SxProps } from '@mui/system';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
@@ -8,32 +7,30 @@ import THEME_ID from './identifier';
 
 const defaultTheme = extendTheme();
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
-  SupportedColorScheme,
-  typeof THEME_ID
->({
-  themeId: THEME_ID,
-  theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
-  defaultColorScheme: {
-    light: 'light',
-    dark: 'dark',
-  },
-  resolveTheme: (theme) => {
-    const newTheme = {
-      ...theme,
-      typography: createTypography(theme.palette, theme.typography),
-    };
-
-    newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
-      return styleFunctionSx({ sx: props, theme: this });
-    };
-
-    return newTheme;
-  },
-});
+const { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript } =
+  createCssVarsProvider<SupportedColorScheme, typeof THEME_ID>({
+    themeId: THEME_ID,
+    theme: defaultTheme,
+    attribute: 'data-mui-color-scheme',
+    modeStorageKey: 'mui-mode',
+    colorSchemeStorageKey: 'mui-color-scheme',
+    defaultColorScheme: {
+      light: 'light',
+      dark: 'dark',
+    },
+    resolveTheme: (theme) => {
+      const newTheme = {
+        ...theme,
+        typography: createTypography(theme.palette, theme.typography),
+      };
+
+      newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
+        return styleFunctionSx({ sx: props, theme: this });
+      };
+
+      return newTheme;
+    },
+  });
 
 let warnedOnce = false;
 
@@ -54,4 +51,10 @@ function Experimental_CssVarsProvider(props: any) {
   return <CssVarsProvider {...props} />;
 }
 
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider, Experimental_CssVarsProvider };
+export {
+  useColorScheme,
+  getInitColorSchemeScript,
+  CssVarsProvider,
+  Experimental_CssVarsProvider,
+  InitColorSchemeScript,
+};
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -93,6 +93,9 @@ export interface CreateCssVarsProviderResult<
   ) => React.ReactElement<any>;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
+  InitColorSchemeScript: (
+    props: Parameters<typeof getInitColorSchemeScript>[0],
+  ) => React.ReactElement;
 }
 
 export default function createCssVarsProvider<

diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -368,5 +368,9 @@ export default function createCssVarsProvider(options) {
       ...params,
     });
 
-  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript };
+  const InitColorSchemeScript = React.memo(function InitColorSchemeScript(props) {
+    return getInitColorSchemeScript(props);
+  });
+
+  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript };
 }
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -40,6 +40,8 @@ export interface GetInitColorSchemeScriptOptions {
    * @default 'data-color-scheme'
    */
   attribute?: string;
+  /** Nonce string to pass to the inline script for CSP headers */
+  nonce?: string | undefined;
 }
 
 export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
@@ -51,10 +53,13 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement',
+    nonce,
   } = options || {};
   return (
     <script
       key="mui-color-scheme-init"
+      suppressHydrationWarning
+      nonce={typeof window === 'undefined' ? nonce : ''}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `(function() {

diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
@@ -11,6 +11,7 @@ type Project = {
   rootPath: string;
   additionalPaths?: string[];
   additionalFiles?: string[];
+  ignorePaths?: string[];
 };
 
 const PROJECTS: Project[] = [
@@ -21,6 +22,9 @@ const PROJECTS: Project[] = [
   {
     name: 'material',
     rootPath: path.join(process.cwd(), 'packages/mui-material'),
+    ignorePaths: [
+      'packages/mui-material/src/styles/CssVarsProvider.tsx', // no need 'use client' because of `styles/index` export
+    ],
   },
   {
     name: 'joy',
@@ -113,7 +117,9 @@ async function run(argv: yargs.ArgumentsCamelCase<CommandOptions>) {
 
     components.forEach(async (component) => {
       try {
-        processFile(component.filename);
+        if (!project.ignorePaths?.some((p) => component.filename.includes(p))) {
+          processFile(component.filename);
+        }
       } catch (error: any) {
         error.message = `${path.relative(process.cwd(), component.filename)}: ${error.message}`;
         throw error;