The InitColorSchemeScript component eliminates dark mode flickering in server-side-rendered applications.
+
+## Introduction
+
+The `InitColorSchemeScript` component is used to remove the dark mode flicker that can occur in server-side-rendered (SSR) applications.
+This script runs before React to attach an attribute based on the user preference so that the correct color mode is applied on first render.
+
+For the best user experience, you should implement this component in any server-rendered Material UI app that supports both light and dark modes.
+
+## Basics
+
+First, enable CSS variables with `colorSchemeSelector: 'data'` in your theme.
+
+```js
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+ cssVariables: {
+ colorSchemeSelector: 'data',
+ },
+});
+
+function App() {
+ return {/* Your app */};
+}
+```
+
+Then, render the `InitColorSchemeScript` component as the first child of the `` tag.
+
+The sections below detail where to render the `InitColorSchemeScript` component when working with Next.js.
+
+### Next.js App Router
+
+Place the `InitColorSchemeScript` component in the root `layout` file:
+
+```js title="src/app/layout.tsx"
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+ return (
+
+
+
+ {props.children}
+
+
+ );
+}
+```
+
+### Next.js Pages Router
+
+Place the `InitColorSchemeScript` component in a custom `_document` file:
+
+```js title="pages/_document.tsx"
+import { Html, Head, Main, NextScript } from 'next/document';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+export default function MyDocument(props) {
+ return (
+
+ {/* tags */}
+
+
+
+
+
+
+ );
+}
+```
+
+## Customization
+
+### Class attribute
+
+To attach classes to DOM elements, set the `attribute` prop to `"class"`.
+
+```js
+
+```
+
+This sets the class name on the color scheme node (which defaults to ``) according to the user's system preference.
+
+```html
+
+```
+
+### Arbitrary attribute
+
+To attach arbitrary attributes to DOM elements, use `%s` as a placeholder on the `attribute` prop.
+
+```js
+ //
+ //
+```
+
+### Default mode
+
+Set the `defaultMode` prop to specify the default mode when the user first visits the page.
+
+For example, if you want users to see the dark mode on their first visit, set the `defaultMode` prop to `"dark"`.
+
+```js
+
+```
+
+## Caveats
+
+### Attribute
+
+When customizing the `attribute` prop, make sure to set the `colorSchemeSelector` in the theme to match the attribute you are using.
+
+```js
+const theme = createTheme({
+ cssVariables: {
+ colorSchemeSelector: 'same value as the `attribute` prop',
+ },
+});
+```
+
+### Default mode
+
+When customizing the `defaultMode` prop, make sure to do the same with the `ThemeProvider` component:
+
+```js
+
+```
diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
index 0540afcff3c486..6a513e539c9502 100644
--- a/docs/data/material/customization/css-theme-variables/configuration.md
+++ b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -26,49 +26,51 @@ createTheme({ cssVariables: { cssVarPrefix: '' } });
To toggle between modes manually, set the `colorSchemeSelector` with one of the following selectors:
-
-
-```js class
-createTheme({
- colorSchemes: { light: true, dark: true },
- cssVariables: {
- colorSchemeSelector: 'class'
- }
-});
-
-// CSS Result
-.light { ... }
-.dark { ... }
-```
-
-```js data
-createTheme({
- colorSchemes: { light: true, dark: true },
- cssVariables: {
- colorSchemeSelector: 'data'
- }
-});
-
-// CSS Result
-[data-light] { ... }
-[data-dark] { ... }
-```
-
-```js string
-// The value must start with dot (.) for class or square brackets ([]) for data
-createTheme({
- colorSchemes: { light: true, dark: true },
- cssVariables: {
- colorSchemeSelector: '.theme-%s'
- }
-});
-
-// CSS Result
-.theme-light { ... }
-.theme-dark { ... }
-```
-
-
+- `class`: adds a class to the `` element.
+
+ ```js class
+ createTheme({
+ colorSchemes: { light: true, dark: true },
+ cssVariables: {
+ colorSchemeSelector: 'class'
+ }
+ });
+
+ // CSS Result
+ .light { ... }
+ .dark { ... }
+ ```
+
+- `data`: adds a data attribute to the `` element.
+
+ ```js data
+ createTheme({
+ colorSchemes: { light: true, dark: true },
+ cssVariables: {
+ colorSchemeSelector: 'data'
+ }
+ });
+
+ // CSS Result
+ [data-light] { ... }
+ [data-dark] { ... }
+ ```
+
+- `string`: adds a custom selector to the `` element.
+
+ ```js string
+ // The value must start with dot (.) for class or square brackets ([]) for data
+ createTheme({
+ colorSchemes: { light: true, dark: true },
+ cssVariables: {
+ colorSchemeSelector: '.theme-%s'
+ }
+ });
+
+ // CSS Result
+ .theme-light { ... }
+ .theme-dark { ... }
+ ```
Then, use `useColorScheme` hook to switch between modes:
@@ -162,7 +164,7 @@ If you have such a condition, replace it with the [`theme.applyStyles()` functio
}
```
-Next, if you have a custom selector that is **not** `media`, add the `InitColorSchemeScript` component based on the framework that you are using:
+Next, if you have a custom selector that is **not** `media`, add the [`InitColorSchemeScript`](/material-ui/react-init-color-scheme-script/) component based on the framework that you are using:
:::success
The `attribute` has to be the same as the one you set in the `colorSchemeSelector` property:
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index 64c76157533513..39667231056728 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -11,7 +11,7 @@ There are examples for the following styling solutions:
- [Styled Components](#styled-components)
- [CSS Modules](#css-modules)
- [Emotion](#emotion)
-- [Tailwind CSS](#tailwind-css)
+- [Tailwind CSS v3](#tailwind-css-v3)
- [~~JSS~~ TSS](#jss-tss)
## Plain CSS
@@ -573,11 +573,15 @@ It works exactly like styled components. You can [use the same guide](/material-
It works exactly like styled components. You can [use the same guide](/material-ui/integrations/interoperability/#styled-components).
-## Tailwind CSS
+## Tailwind CSS v3
+:::info
+For Tailwind CSS v4, please refer to the [v4 integration guide](/material-ui/integrations/tailwindcss/tailwindcss-v4/).
+:::
+
### Setup
diff --git a/docs/data/material/integrations/tailwindcss/TextFieldTailwind.js b/docs/data/material/integrations/tailwindcss/TextFieldTailwind.js
new file mode 100644
index 00000000000000..14d191d6c6c7de
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TextFieldTailwind.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Input from '@mui/material/Input';
+import FormHelperText from '@mui/material/FormHelperText';
+
+export default function TextFieldTailwind() {
+ return (
+
+
+ Name
+
+
+ Some important helper text
+
+ );
+}
diff --git a/docs/data/material/integrations/tailwindcss/TextFieldTailwind.tsx b/docs/data/material/integrations/tailwindcss/TextFieldTailwind.tsx
new file mode 100644
index 00000000000000..14d191d6c6c7de
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TextFieldTailwind.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Input from '@mui/material/Input';
+import FormHelperText from '@mui/material/FormHelperText';
+
+export default function TextFieldTailwind() {
+ return (
+
+
+ Name
+
+
+ Some important helper text
+
+ );
+}
diff --git a/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md b/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md
new file mode 100644
index 00000000000000..3655248f56c225
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md
@@ -0,0 +1,133 @@
+# Tailwind CSS v4 integration
+
+
Learn how to use Material UI with Tailwind CSS v4.
+
+## Overview
+
+There are two steps to integrate Tailwind CSS v4 with Material UI:
+
+1. Configure the styles to generate with the `@layer` directive.
+2. Set up the layer order so that `mui` comes before the `utilities` layer, allowing Tailwind CSS classes to override Material UI styles.
+
+The instructions below detail how to achieve this using common React frameworks.
+
+### Next.js App Router
+
+To integrate Tailwind CSS v4 with Material UI in a Next.js App Router project, start by configuring Material UI with Next.js in the [App Router integration guide](/material-ui/integrations/nextjs/#app-router).
+Then follow these steps:
+
+1. Enable the [CSS layer feature](/material-ui/integrations/nextjs/#using-other-styling-solutions) in the root layout:
+
+```tsx title="src/app/layout.tsx"
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+
+export default function RootLayout() {
+ return (
+
+
+
+ {/* Your app */}
+
+
+
+ );
+}
+```
+
+2. Configure the layer order in the Tailwind CSS file:
+
+```css title="src/app/globals.css"
+@layer theme, base, mui, components, utilities;
+@import 'tailwindcss';
+```
+
+### Next.js Pages Router
+
+To integrate Tailwind CSS v4 with Material UI in a Next.js Pages Router project, start by configuring Material UI with Next.js in the [Pages Router integration guide](/material-ui/integrations/nextjs/#pages-router).
+Then follow these steps:
+
+1. Enable the [CSS layer feature](/material-ui/integrations/nextjs/#configuration-2) in a custom `_document`:
+
+```tsx title="pages/_document.tsx"
+import {
+ createCache,
+ documentGetInitialProps,
+} from '@mui/material-nextjs/v15-pagesRouter';
+
+// ...
+
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
+ const finalProps = await documentGetInitialProps(ctx, {
+ emotionCache: createCache({ enableCssLayer: true }),
+ });
+ return finalProps;
+};
+```
+
+2. Configure the layer order with the `GlobalStyles` component—it must be the first child of the `AppCacheProvider`:
+
+```tsx title="pages/_app.tsx"
+import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function MyApp(props: AppProps) {
+ const { Component, pageProps } = props;
+ return (
+
+
+ {/* Your app */}
+
+ );
+}
+```
+
+### Vite.js or any other SPA
+
+To integrate Tailwind CSS v4 with Material UI in a Vite-based app, make the following changes in `src/main.tsx`:
+
+1. Pass the `enableCssLayer` prop to the `StyledEngineProvider` component.
+2. Configure the layer order with the `GlobalStyles` component.
+
+```tsx title="main.tsx"
+import { StyledEngineProvider } from '@mui/material/styles';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+ {/* Your app */}
+
+ ,
+);
+```
+
+## Tailwind CSS IntelliSense for VS Code
+
+The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension requires extra configuration to work properly when customizing the interior slots of Material UI components.
+After installing the extension, add the following line to your [VS Code `settings.json`](https://code.visualstudio.com/docs/editor/settings#_settings-json-file) file:
+
+```json
+{
+ // ...config
+ "tailwindCSS.experimental.classRegex": [["className\\s*:\\s*['\"]([^'\"]*)['\"]"]]
+}
+```
+
+Now you should see the autocomplete and syntax highlighting features when using the `slotProps` prop, as shown in the screenshot below:
+
+
+
+## Usage
+
+- Use the `className` prop to apply Tailwind CSS classes to the root element of the component.
+- Use `slotProps.{slotName}.className` to apply Tailwind CSS classes to a component's [interior slots](/material-ui/customization/overriding-component-structure/#interior-slots).
+
+{{"demo": "TextFieldTailwind.js"}}
+
+## Troubleshooting
+
+If the Tailwind CSS classes are not overriding Material UI components, make sure that:
+
+- You are using Tailwind CSS >= v4.
+- You have configured the layer order correctly by checking the [DevTools styles tab](https://developer.chrome.com/docs/devtools/css/reference#cascade-layers). The `mui` layer should come before the `utilities` layer.
diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md
index 695133c46d4c70..bcc99f8b9a9079 100644
--- a/docs/data/material/migration/migration-v4/v5-component-changes.md
+++ b/docs/data/material/migration/migration-v4/v5-component-changes.md
@@ -33,6 +33,34 @@ As the core components use Emotion as their style engine, the props used by Emot
```
+## AccordionSummary
+
+### Rename `expandIcon` to `expandIconWrapper`
+
+This change was made to make it clearer that the element is a wrapper around the icon, not the icon itself.
+
+Update the CSS class name and the theme overrides accordingly.
+
+```diff
+-'.MuiAccordionSummary-expandIcon': {
++'.MuiAccordionSummary-expandIconWrapper': {
+```
+
+```diff
+ createTheme({
+ components: {
+ MuiAccordionSummary: {
+ styleOverrides: {
+- expandIcon: {
++ expandIconWrapper: {
+ // ...
+ },
+ },
+ },
+ },
+ });
+```
+
## AppBar
### Fix z-index issues
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index cfe762db7d7194..c66a7e3a474c3e 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -121,6 +121,10 @@ const pages: MuiPage[] = [
title: 'Click-Away Listener',
},
{ pathname: '/material-ui/react-css-baseline', title: 'CSS Baseline' },
+ {
+ pathname: '/material-ui/react-init-color-scheme-script',
+ title: 'InitColorSchemeScript',
+ },
{ pathname: '/material-ui/react-modal' },
{ pathname: '/material-ui/react-no-ssr', title: 'No SSR' },
{ pathname: '/material-ui/react-popover' },
@@ -255,6 +259,11 @@ const pages: MuiPage[] = [
pathname: '/material-ui/integrations',
title: 'Integrations',
children: [
+ {
+ pathname: '/material-ui/integrations/tailwindcss/tailwindcss-v4',
+ title: 'Tailwind CSS v4 integration',
+ newFeature: true,
+ },
{
pathname: '/material-ui/integrations/nextjs',
title: 'Next.js integration',
diff --git a/docs/data/material/pagesApi.js b/docs/data/material/pagesApi.js
index bb8d428298c534..f169c1f9b0c446 100644
--- a/docs/data/material/pagesApi.js
+++ b/docs/data/material/pagesApi.js
@@ -55,6 +55,7 @@ export default [
{ pathname: '/material-ui/api/image-list' },
{ pathname: '/material-ui/api/image-list-item' },
{ pathname: '/material-ui/api/image-list-item-bar' },
+ { pathname: '/material-ui/api/init-color-scheme-script' },
{ pathname: '/material-ui/api/input' },
{ pathname: '/material-ui/api/input-adornment' },
{ pathname: '/material-ui/api/input-base' },
diff --git a/docs/package.json b/docs/package.json
index 3f2b5b99445b8b..cba39e6cbed3c0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -42,18 +42,18 @@
"@mui/system": "workspace:^",
"@mui/types": "workspace:^",
"@mui/utils": "workspace:^",
- "@mui/x-charts": "7.28.0",
- "@mui/x-data-grid": "7.28.3",
- "@mui/x-data-grid-generator": "7.28.3",
- "@mui/x-data-grid-premium": "7.28.3",
- "@mui/x-data-grid-pro": "7.28.3",
- "@mui/x-date-pickers": "7.28.3",
- "@mui/x-date-pickers-pro": "7.28.3",
- "@mui/x-license": "7.28.0",
- "@mui/x-tree-view": "7.28.1",
+ "@mui/x-charts": "7.29.0",
+ "@mui/x-data-grid": "7.29.0",
+ "@mui/x-data-grid-generator": "7.29.0",
+ "@mui/x-data-grid-premium": "7.29.0",
+ "@mui/x-data-grid-pro": "7.29.0",
+ "@mui/x-date-pickers": "7.29.0",
+ "@mui/x-date-pickers-pro": "7.29.0",
+ "@mui/x-license": "7.29.0",
+ "@mui/x-tree-view": "7.29.0",
"@popperjs/core": "^2.11.8",
"@react-spring/web": "^9.7.5",
- "@tailwindcss/postcss": "^4.1.3",
+ "@tailwindcss/postcss": "^4.1.4",
"@toolpad/core": "^0.14.0",
"autoprefixer": "^10.4.21",
"autosuggest-highlight": "^3.3.4",
@@ -72,7 +72,7 @@
"feed": "^4.2.2",
"fg-loadcss": "^3.1.0",
"final-form": "^4.20.10",
- "flexsearch": "^0.8.154",
+ "flexsearch": "^0.8.158",
"fs-extra": "^11.3.0",
"json2mq": "^0.2.0",
"jss": "^10.10.0",
@@ -82,7 +82,7 @@
"lz-string": "^1.5.0",
"markdown-to-jsx": "^7.7.4",
"material-ui-popup-state": "^5.3.5",
- "next": "^15.3.0",
+ "next": "^15.3.1",
"notistack": "3.0.2",
"nprogress": "^0.2.0",
"postcss": "^8.5.3",
@@ -96,7 +96,7 @@
"react-intersection-observer": "^9.16.0",
"react-is": "^19.1.0",
"react-number-format": "^5.4.4",
- "react-router": "^7.5.0",
+ "react-router": "^7.5.1",
"react-runner": "^1.0.5",
"react-simple-code-editor": "^0.14.1",
"react-spring": "^9.7.5",
@@ -128,7 +128,7 @@
"@types/node": "^20.17.30",
"@types/nprogress": "^0.2.3",
"@types/prop-types": "^15.7.14",
- "@types/react": "^19.1.1",
+ "@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@types/react-swipeable-views": "^0.13.6",
"@types/react-transition-group": "^4.4.12",
@@ -140,7 +140,7 @@
"marked": "^15.0.8",
"playwright": "^1.51.1",
"prettier": "^3.5.3",
- "tailwindcss": "^4.1.3",
+ "tailwindcss": "^4.1.4",
"yargs": "^17.7.2"
}
}
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 032675be403a72..4899191841ba80 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -38,7 +38,7 @@ export default class MyDocument extends Document {
content={getMetaThemeColor('dark')}
media="(prefers-color-scheme: dark)"
/>
-
+
{/* iOS Icon */}
{/* SEO */}
diff --git a/docs/pages/blog/material-ui-v7-is-here.md b/docs/pages/blog/material-ui-v7-is-here.md
index 31ab214a6dc30d..eb8a68b0021c50 100644
--- a/docs/pages/blog/material-ui-v7-is-here.md
+++ b/docs/pages/blog/material-ui-v7-is-here.md
@@ -14,12 +14,39 @@ It is designed to be straightforward to upgrade to.
## Improved ESM support
-The package layout has been updated, and now unambiguously supports both valid ESM and CommonJS through the `exports` field in `package.json`.
-This update fixes several issues with popular bundlers like Vite and webpack, and makes it possible to load MUI packages from ES modules under Node.js.
+The package layout has been updated, and now unambiguously supports both valid ESM and CommonJS through the `exports` field in `package.json`. The package layout was previously faux-ESM.
+
+This update fixes several issues with popular bundlers like Vite and webpack, and makes it possible to load Material UI packages from ES modules under Node.js.
+More details in [mui/material-ui#43938](https://github.com/mui/material-ui/issues/43938).
+
+For example, you can see how all the warnings that [publint.dev](https://publint.dev/) reports with v6 are fixed in v7:
+
+
+
+ Before v6
+
+
+
+
+ After v7
+
+
+This new package layout might create breaking changes for some users, especially those depending on private APIs of the library. Refer to the [migration guide](/material-ui/migration/upgrade-to-v7/#package-layout-updated) for more details.
## Completed the slot pattern implementation
The API for replacing or modifying component inner elements is now standardized, and all relevant components use the `slots` and `slotProps` props for greater flexibility and consistency.
+For example:
+
+```diff
+
+```
+
A [guide about this pattern](/material-ui/customization/overriding-component-structure/) has been added to the documentation.
## Opt-in support for CSS layers
diff --git a/docs/pages/blog/mui-x-v8.md b/docs/pages/blog/mui-x-v8.md
index b49cc66159adbd..43a73ef23417a8 100644
--- a/docs/pages/blog/mui-x-v8.md
+++ b/docs/pages/blog/mui-x-v8.md
@@ -426,7 +426,12 @@ We've published migration guides for Material UI and each of the advanced compo
These guides detail every breaking change from previous versions with the recommended approach to fix them.
We care deeply about providing a smooth migration, so it's been a top priority for us when planning our new major versions.
-Please follow the instructions in our [migration guide](/x/migration/).
+Please refer to the migration instructions for each individual component below:
+
+- [Data Grid](/x/migration/migration-data-grid-v7/)
+- [Date and Time Pickers](/x/migration/migration-pickers-v7/)
+- [Tree View](/x/migration/migration-tree-view-v7/)
+- [Charts](/x/migration/migration-charts-v7/)
## Long‑Term Support (LTS)
diff --git a/docs/pages/material-ui/api/init-color-scheme-script.js b/docs/pages/material-ui/api/init-color-scheme-script.js
new file mode 100644
index 00000000000000..e7620a91b2757b
--- /dev/null
+++ b/docs/pages/material-ui/api/init-color-scheme-script.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './init-color-scheme-script.json';
+
+export default function Page(props) {
+ const { descriptions, pageContent } = props;
+ return ;
+}
+
+Page.getInitialProps = () => {
+ const req = require.context(
+ 'docs/translations/api-docs/init-color-scheme-script',
+ false,
+ /\.\/init-color-scheme-script.*.json$/,
+ );
+ const descriptions = mapApiPageTranslations(req);
+
+ return {
+ descriptions,
+ pageContent: jsonPageContent,
+ };
+};
diff --git a/docs/pages/material-ui/api/init-color-scheme-script.json b/docs/pages/material-ui/api/init-color-scheme-script.json
new file mode 100644
index 00000000000000..9f57d0c949eec2
--- /dev/null
+++ b/docs/pages/material-ui/api/init-color-scheme-script.json
@@ -0,0 +1,31 @@
+{
+ "props": {
+ "attribute": { "type": { "name": "string" }, "default": "'data-mui-color-scheme'" },
+ "colorSchemeNode": { "type": { "name": "string" }, "default": "'document.documentElement'" },
+ "colorSchemeStorageKey": { "type": { "name": "string" }, "default": "'mui-color-scheme'" },
+ "defaultDarkColorScheme": { "type": { "name": "string" }, "default": "'dark'" },
+ "defaultLightColorScheme": { "type": { "name": "string" }, "default": "'light'" },
+ "defaultMode": {
+ "type": {
+ "name": "enum",
+ "description": "'dark' | 'light' | 'system'"
+ },
+ "default": "'system'"
+ },
+ "modeStorageKey": { "type": { "name": "string" }, "default": "'mui-mode'" },
+ "nonce": { "type": { "name": "string" } }
+ },
+ "name": "InitColorSchemeScript",
+ "imports": [
+ "import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';",
+ "import { InitColorSchemeScript } from '@mui/material';"
+ ],
+ "classes": [],
+ "spread": true,
+ "themeDefaultProps": null,
+ "muiName": "MuiInitColorSchemeScript",
+ "filename": "/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx",
+ "inheritance": null,
+ "demos": "
+ 
+