diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
index b1d55ca4408a14..6fde1fc9fd9be3 100644
--- a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
+++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
@@ -9,7 +9,8 @@ import { navigationCustomizations } from './customizations/navigation';
import { surfacesCustomizations } from './customizations/surfaces';
import { colorSchemes, typography, shadows, shape } from './themePrimitives';
-function AppTheme({ children, disableCustomTheme, themeComponents }) {
+function AppTheme(props) {
+ const { children, disableCustomTheme, themeComponents } = props;
const theme = React.useMemo(() => {
return disableCustomTheme
? {}
diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
index 1fe35d6faeef48..a4a512c30aef59 100644
--- a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
+++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
@@ -17,11 +17,8 @@ interface AppThemeProps {
themeComponents?: ThemeOptions['components'];
}
-export default function AppTheme({
- children,
- disableCustomTheme,
- themeComponents,
-}: AppThemeProps) {
+export default function AppTheme(props: AppThemeProps) {
+ const { children, disableCustomTheme, themeComponents } = props;
const theme = React.useMemo(() => {
return disableCustomTheme
? {}
diff --git a/docs/pages/joy-ui/api/stack.json b/docs/pages/joy-ui/api/stack.json
index 008afff7737bbc..8826d1eebc8a85 100644
--- a/docs/pages/joy-ui/api/stack.json
+++ b/docs/pages/joy-ui/api/stack.json
@@ -6,14 +6,16 @@
"type": {
"name": "union",
"description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object"
- }
+ },
+ "default": "'column'"
},
"divider": { "type": { "name": "node" } },
"spacing": {
"type": {
"name": "union",
"description": "Array<number
| string>
| number
| object
| string"
- }
+ },
+ "default": "0"
},
"sx": {
"type": {
@@ -22,7 +24,7 @@
},
"additionalInfo": { "sx": true }
},
- "useFlexGap": { "type": { "name": "bool" } }
+ "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
},
"name": "Stack",
"imports": ["import Stack from '@mui/joy/Stack';", "import { Stack } from '@mui/joy';"],
diff --git a/docs/pages/material-ui/api/container.json b/docs/pages/material-ui/api/container.json
index 29b78f807d6157..0f60f58e920597 100644
--- a/docs/pages/material-ui/api/container.json
+++ b/docs/pages/material-ui/api/container.json
@@ -2,13 +2,14 @@
"props": {
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"component": { "type": { "name": "elementType" } },
- "disableGutters": { "type": { "name": "bool" } },
- "fixed": { "type": { "name": "bool" } },
+ "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+ "fixed": { "type": { "name": "bool" }, "default": "false" },
"maxWidth": {
"type": {
"name": "union",
"description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string"
- }
+ },
+ "default": "'lg'"
},
"sx": {
"type": {
diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
index c4b4b854151cfd..7f74fa6b051eef 100644
--- a/docs/pages/material-ui/api/grid-2.json
+++ b/docs/pages/material-ui/api/grid-2.json
@@ -5,7 +5,8 @@
"type": {
"name": "union",
"description": "Array<number>
| number
| object"
- }
+ },
+ "default": "12"
},
"columnSpacing": {
"type": {
@@ -13,12 +14,13 @@
"description": "Array<number
| string>
| number
| object
| string"
}
},
- "container": { "type": { "name": "bool" } },
+ "container": { "type": { "name": "bool" }, "default": "false" },
"direction": {
"type": {
"name": "union",
"description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object"
- }
+ },
+ "default": "'row'"
},
"offset": {
"type": {
@@ -42,13 +44,15 @@
"type": {
"name": "union",
"description": "Array<number
| string>
| number
| object
| string"
- }
+ },
+ "default": "0"
},
"wrap": {
"type": {
"name": "enum",
"description": "'nowrap'
| 'wrap-reverse'
| 'wrap'"
- }
+ },
+ "default": "'wrap'"
}
},
"name": "Grid2",
diff --git a/docs/pages/material-ui/api/stack.json b/docs/pages/material-ui/api/stack.json
index ae424d7b57eea6..65e1dc1c8a28d2 100644
--- a/docs/pages/material-ui/api/stack.json
+++ b/docs/pages/material-ui/api/stack.json
@@ -6,14 +6,16 @@
"type": {
"name": "union",
"description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object"
- }
+ },
+ "default": "'column'"
},
"divider": { "type": { "name": "node" } },
"spacing": {
"type": {
"name": "union",
"description": "Array<number
| string>
| number
| object
| string"
- }
+ },
+ "default": "0"
},
"sx": {
"type": {
@@ -22,7 +24,7 @@
},
"additionalInfo": { "sx": true }
},
- "useFlexGap": { "type": { "name": "bool" } }
+ "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
},
"name": "Stack",
"imports": ["import Stack from '@mui/material/Stack';", "import { Stack } from '@mui/material';"],
diff --git a/docs/pages/system/api/container.json b/docs/pages/system/api/container.json
index 3f094034d61076..ae5bd4660c2576 100644
--- a/docs/pages/system/api/container.json
+++ b/docs/pages/system/api/container.json
@@ -2,13 +2,14 @@
"props": {
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"component": { "type": { "name": "elementType" } },
- "disableGutters": { "type": { "name": "bool" } },
- "fixed": { "type": { "name": "bool" } },
+ "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+ "fixed": { "type": { "name": "bool" }, "default": "false" },
"maxWidth": {
"type": {
"name": "union",
"description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string"
- }
+ },
+ "default": "'lg'"
},
"sx": {
"type": {
diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json
index 3a3c9d23850287..4cd038309b7d7b 100644
--- a/docs/pages/system/api/grid.json
+++ b/docs/pages/system/api/grid.json
@@ -5,7 +5,8 @@
"type": {
"name": "union",
"description": "Array<number>
| number
| object"
- }
+ },
+ "default": "12"
},
"columnSpacing": {
"type": {
@@ -13,12 +14,13 @@
"description": "Array<number
| string>
| number
| object
| string"
}
},
- "container": { "type": { "name": "bool" } },
+ "container": { "type": { "name": "bool" }, "default": "false" },
"direction": {
"type": {
"name": "union",
"description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object"
- }
+ },
+ "default": "'row'"
},
"offset": {
"type": {
@@ -42,13 +44,15 @@
"type": {
"name": "union",
"description": "Array<number
| string>
| number
| object
| string"
- }
+ },
+ "default": "0"
},
"wrap": {
"type": {
"name": "enum",
"description": "'nowrap'
| 'wrap-reverse'
| 'wrap'"
- }
+ },
+ "default": "'wrap'"
}
},
"name": "Grid",
diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json
index a5d69b0c81f265..2c838e2175b73d 100644
--- a/docs/pages/system/api/stack.json
+++ b/docs/pages/system/api/stack.json
@@ -6,14 +6,16 @@
"type": {
"name": "union",
"description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object"
- }
+ },
+ "default": "'column'"
},
"divider": { "type": { "name": "node" } },
"spacing": {
"type": {
"name": "union",
"description": "Array<number
| string>
| number
| object
| string"
- }
+ },
+ "default": "0"
},
"sx": {
"type": {
@@ -22,7 +24,7 @@
},
"additionalInfo": { "sx": true }
},
- "useFlexGap": { "type": { "name": "bool" } }
+ "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
},
"name": "Stack",
"imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"],
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 577dfae4a22407..02a81285bb3ddb 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -697,13 +697,26 @@ export default async function generateComponentApi(
const filename = componentInfo.filename;
let reactApi: ComponentReactApi;
- if (componentInfo.isSystemComponent || componentInfo.name === 'Grid2') {
- try {
+ try {
+ reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+ filename,
+ });
+ } catch (error) {
+ // fallback to default logic if there is no `create*` definition.
+ if ((error as Error).message === 'No suitable component definition found.') {
reactApi = docgenParse(
src,
(ast) => {
let node;
+ // TODO migrate to react-docgen v6, using Babel AST now
astTypes.visit(ast, {
+ visitFunctionDeclaration: (functionPath) => {
+ // @ts-ignore
+ if (functionPath.node.params[0].name === 'props') {
+ node = functionPath;
+ }
+ return false;
+ },
visitVariableDeclaration: (variablePath) => {
const definitions: any[] = [];
if (variablePath.node.declarations) {
@@ -711,7 +724,6 @@ export default async function generateComponentApi(
.get('declarations')
.each((declarator: any) => definitions.push(declarator.get('init')));
}
-
definitions.forEach((definition) => {
// definition.value.expression is defined when the source is in TypeScript.
const expression = definition.value?.expression
@@ -719,36 +731,25 @@ export default async function generateComponentApi(
: definition;
if (expression.value?.callee) {
const definitionName = expression.value.callee.name;
-
if (definitionName === `create${componentInfo.name}`) {
node = expression;
}
}
});
-
return false;
},
});
return node;
},
- defaultHandlers,
- { filename },
- );
- } catch (error) {
- // fallback to default logic if there is no `create*` definition.
- if ((error as Error).message === 'No suitable component definition found.') {
- reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+ defaultHandlers.concat(muiDefaultPropsHandler),
+ {
filename,
- });
- } else {
- throw error;
- }
+ },
+ );
+ } else {
+ throw error;
}
- } else {
- reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
- filename,
- });
}
if (!reactApi.props) {
diff --git a/packages/api-docs-builder/utils/defaultPropsHandler.ts b/packages/api-docs-builder/utils/defaultPropsHandler.ts
index 9b49c019f1af88..6836e85cb677ec 100644
--- a/packages/api-docs-builder/utils/defaultPropsHandler.ts
+++ b/packages/api-docs-builder/utils/defaultPropsHandler.ts
@@ -131,6 +131,11 @@ function getExplicitPropsDeclaration(
): NodePath | undefined {
const functionNode = getRenderBody(componentDefinition, importer);
+ // No function body available to inspect.
+ if (!functionNode.value) {
+ return undefined;
+ }
+
let propsPath: NodePath | undefined;
// visitVariableDeclarator, can't use visit body.node since it looses scope information
functionNode
diff --git a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
index d6af8aa4274a41..f3e1c63e3d4eb6 100644
--- a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
+++ b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
@@ -51,6 +51,7 @@ function isStyledFunction(node: ts.VariableDeclaration): boolean {
);
}
+// TODO update to reflect https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
function getJSXLikeReturnValueFromFunction(type: ts.Type, project: TypeScriptProject) {
return type
.getCallSignatures()
diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
index e84ca9b1382b42..5f8f4da604c046 100644
--- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
@@ -209,7 +209,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
return undefined;
}, [handleClickAway, mouseEvent]);
- return {React.cloneElement(children, childrenProps)};
+ return React.cloneElement(children, childrenProps);
}
ClickAwayListener.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-base/src/NoSsr/NoSsr.tsx b/packages/mui-base/src/NoSsr/NoSsr.tsx
index c637df94e70b61..8468d401c64a86 100644
--- a/packages/mui-base/src/NoSsr/NoSsr.tsx
+++ b/packages/mui-base/src/NoSsr/NoSsr.tsx
@@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element {
}
}, [defer]);
- // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
- return {mountedState ? children : fallback};
+ // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
+ return (mountedState ? children : fallback) as React.JSX.Element;
}
NoSsr.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx
index 830b229d8eb175..af607b51532adc 100644
--- a/packages/mui-base/src/Portal/Portal.tsx
+++ b/packages/mui-base/src/Portal/Portal.tsx
@@ -64,14 +64,10 @@ const Portal = React.forwardRef(function Portal(
};
return React.cloneElement(children, newProps);
}
- return {children};
+ return children;
}
- return (
-
- {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
-
- );
+ return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
}) as React.ForwardRefExoticComponent>;
Portal.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
index 6a695e84f78352..5987a8f04dc1c8 100644
--- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
+++ b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
@@ -210,7 +210,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
return undefined;
}, [handleClickAway, mouseEvent]);
- return {React.cloneElement(children, childrenProps)};
+ return React.cloneElement(children, childrenProps);
}
ClickAwayListener.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Grid2/Grid2.test.js b/packages/mui-material/src/Grid2/Grid2.test.js
index 87c952bca83cd7..533a3f0502d9e4 100644
--- a/packages/mui-material/src/Grid2/Grid2.test.js
+++ b/packages/mui-material/src/Grid2/Grid2.test.js
@@ -1,6 +1,8 @@
import * as React from 'react';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
import Grid2, { grid2Classes as classes } from '@mui/material/Grid2';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { expect } from 'chai';
import describeConformance from '../../test/describeConformance';
// The main tests are in mui-system Grid folder
@@ -20,4 +22,31 @@ describe('', () => {
testVariantProps: { container: true, spacing: 5 },
skip: ['componentsProp', 'classesRoot'],
}));
+
+ it('should render with the container class', () => {
+ render();
+ expect(screen.getByTestId('grid')).to.have.class(classes.container);
+ });
+
+ it('should have container styles passed from theme', () => {
+ const theme = createTheme({
+ components: {
+ MuiGrid2: {
+ styleOverrides: {
+ container: {
+ padding: '11px',
+ },
+ },
+ },
+ },
+ });
+ render(
+
+
+ hello
+
+ ,
+ );
+ expect(screen.getByTestId('grid')).to.have.style('padding', '11px');
+ });
});
diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
index 1d2841bafa74c1..99c4148d33f2ef 100644
--- a/packages/mui-material/src/Grid2/Grid2.tsx
+++ b/packages/mui-material/src/Grid2/Grid2.tsx
@@ -127,7 +127,10 @@ const Grid2 = createGrid2({
createStyledComponent: styled('div', {
name: 'MuiGrid2',
slot: 'Root',
- overridesResolver: (props, styles) => styles.root,
+ overridesResolver: (props, styles) => {
+ const { ownerState } = props;
+ return [styles.root, ownerState.container && styles.container];
+ },
}),
componentName: 'MuiGrid2',
useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }),
diff --git a/packages/mui-material/src/Hidden/HiddenJs.js b/packages/mui-material/src/Hidden/HiddenJs.js
index b591452cef6299..a9ab0d0a965ee2 100644
--- a/packages/mui-material/src/Hidden/HiddenJs.js
+++ b/packages/mui-material/src/Hidden/HiddenJs.js
@@ -1,5 +1,4 @@
'use client';
-import * as React from 'react';
import PropTypes from 'prop-types';
import exactProp from '@mui/utils/exactProp';
import withWidth, { isWidthDown, isWidthUp } from './withWidth';
@@ -50,7 +49,7 @@ function HiddenJs(props) {
return null;
}
- return {children};
+ return children;
}
HiddenJs.propTypes = {
diff --git a/packages/mui-material/src/NoSsr/NoSsr.tsx b/packages/mui-material/src/NoSsr/NoSsr.tsx
index c7e2dfbc191a6e..0b18a597a751ae 100644
--- a/packages/mui-material/src/NoSsr/NoSsr.tsx
+++ b/packages/mui-material/src/NoSsr/NoSsr.tsx
@@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element {
}
}, [defer]);
- // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
- return {mountedState ? children : fallback};
+ // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
+ return (mountedState ? children : fallback) as React.JSX.Element;
}
NoSsr.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Portal/Portal.tsx b/packages/mui-material/src/Portal/Portal.tsx
index 8bd141d8a5f858..a028eb856836e0 100644
--- a/packages/mui-material/src/Portal/Portal.tsx
+++ b/packages/mui-material/src/Portal/Portal.tsx
@@ -64,14 +64,10 @@ const Portal = React.forwardRef(function Portal(
};
return React.cloneElement(children, newProps);
}
- return {children};
+ return children;
}
- return (
-
- {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
-
- );
+ return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
}) as React.ForwardRefExoticComponent>;
Portal.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/styles/ThemeProviderWithVars.test.js b/packages/mui-material/src/styles/ThemeProviderWithVars.test.js
index 57cc558313c691..e06a6d304d63dd 100644
--- a/packages/mui-material/src/styles/ThemeProviderWithVars.test.js
+++ b/packages/mui-material/src/styles/ThemeProviderWithVars.test.js
@@ -408,4 +408,35 @@ describe('[Material UI] ThemeProviderWithVars', () => {
fireEvent.click(screen.getByText('Dark'));
}).not.toErrorDev();
});
+
+ it('theme should remain the same when ThemeProvider rerenders', () => {
+ const theme = createTheme({ cssVariables: true });
+
+ function Inner() {
+ const upperTheme = useTheme();
+ const themeRef = React.useRef(upperTheme);
+ const [changed, setChanged] = React.useState(false);
+ React.useEffect(() => {
+ if (themeRef.current !== upperTheme) {
+ setChanged(true);
+ }
+ }, [upperTheme]);
+ return changed ? : null;
+ }
+ function App() {
+ const [, setState] = React.useState({});
+ const rerender = () => setState({});
+ return (
+
+
+
+
+ );
+ }
+ render();
+
+ fireEvent.click(screen.getByRole('button'));
+
+ expect(screen.queryByTestId('theme-changed')).to.equal(null);
+ });
});
diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js
index 26df7f1fdf6398..e4351045dffa8f 100644
--- a/packages/mui-material/src/styles/createTheme.test.js
+++ b/packages/mui-material/src/styles/createTheme.test.js
@@ -221,6 +221,22 @@ describe('createTheme', () => {
expect(theme.colorSchemes.dark).to.not.equal(undefined);
});
+ it('should be able to customize tonal offset', () => {
+ const theme = createTheme({
+ cssVariables: true,
+ palette: {
+ primary: {
+ main: green[500],
+ },
+ tonalOffset: {
+ light: 0.1,
+ dark: 0.9,
+ },
+ },
+ });
+ expect(theme.palette.primary.main).to.equal('#4caf50');
+ });
+
describe('spacing', () => {
it('should provide the default spacing', () => {
const theme = createTheme({ cssVariables: true });
diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js
index 9e1fd9f76707e9..fde30948676edf 100644
--- a/packages/mui-material/src/styles/createThemeWithVars.js
+++ b/packages/mui-material/src/styles/createThemeWithVars.js
@@ -40,7 +40,7 @@ function setColor(obj, key, defaultValue) {
}
function toRgb(color) {
- if (!color || !color.startsWith('hsl')) {
+ if (typeof color !== 'string' || !color.startsWith('hsl')) {
return color;
}
return hslToRgb(color);
@@ -421,7 +421,7 @@ export default function createThemeWithVars(options = {}, ...args) {
// The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
- if (colors && typeof colors === 'object') {
+ if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
// Silent the error for custom palettes.
if (colors.main) {
setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index e7a2a21febb207..64ed9f9fc4037d 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -48,6 +48,9 @@ export default function createCssVarsProvider(options) {
const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
+ const defaultColorSchemes = {};
+ const defaultComponents = {};
+
function CssVarsProvider(props) {
const {
children,
@@ -75,12 +78,12 @@ export default function createCssVarsProvider(options) {
return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
}, [themeProp]);
const scopedTheme = initialTheme[themeId];
+ const restThemeProp = scopedTheme || initialTheme;
const {
- colorSchemes = {},
- components = {},
+ colorSchemes = defaultColorSchemes,
+ components = defaultComponents,
cssVarPrefix,
- ...restThemeProp
- } = scopedTheme || initialTheme;
+ } = restThemeProp;
const joinedColorSchemes = Object.keys(colorSchemes)
.filter((k) => !!colorSchemes[k])
.join(',');
@@ -126,42 +129,46 @@ export default function createCssVarsProvider(options) {
colorScheme = ctx.colorScheme;
}
- // `colorScheme` is undefined on the server and hydration phase
- const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+ const memoTheme = React.useMemo(() => {
+ // `colorScheme` is undefined on the server and hydration phase
+ const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
- // 2. get the `vars` object that refers to the CSS custom properties
- const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
+ // 2. get the `vars` object that refers to the CSS custom properties
+ const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
- // 3. Start composing the theme object
- const theme = {
- ...restThemeProp,
- components,
- colorSchemes,
- cssVarPrefix,
- vars: themeVars,
- };
- if (typeof theme.generateSpacing === 'function') {
- theme.spacing = theme.generateSpacing();
- }
+ // 3. Start composing the theme object
+ const theme = {
+ ...restThemeProp,
+ components,
+ colorSchemes,
+ cssVarPrefix,
+ vars: themeVars,
+ };
+ if (typeof theme.generateSpacing === 'function') {
+ theme.spacing = theme.generateSpacing();
+ }
- // 4. Resolve the color scheme and merge it to the theme
- if (calculatedColorScheme) {
- const scheme = colorSchemes[calculatedColorScheme];
- if (scheme && typeof scheme === 'object') {
- // 4.1 Merge the selected color scheme to the theme
- Object.keys(scheme).forEach((schemeKey) => {
- if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
- // shallow merge the 1st level structure of the theme.
- theme[schemeKey] = {
- ...theme[schemeKey],
- ...scheme[schemeKey],
- };
- } else {
- theme[schemeKey] = scheme[schemeKey];
- }
- });
+ // 4. Resolve the color scheme and merge it to the theme
+ if (calculatedColorScheme) {
+ const scheme = colorSchemes[calculatedColorScheme];
+ if (scheme && typeof scheme === 'object') {
+ // 4.1 Merge the selected color scheme to the theme
+ Object.keys(scheme).forEach((schemeKey) => {
+ if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+ // shallow merge the 1st level structure of the theme.
+ theme[schemeKey] = {
+ ...theme[schemeKey],
+ ...scheme[schemeKey],
+ };
+ } else {
+ theme[schemeKey] = scheme[schemeKey];
+ }
+ });
+ }
}
- }
+
+ return resolveTheme ? resolveTheme(theme) : theme;
+ }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
// 5. Declaring effects
// 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -248,7 +255,7 @@ export default function createCssVarsProvider(options) {
process.env.NODE_ENV === 'production'
? setMode
: (newMode) => {
- if (theme.colorSchemeSelector === 'media') {
+ if (memoTheme.colorSchemeSelector === 'media') {
console.error(
[
'MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).',
@@ -270,7 +277,7 @@ export default function createCssVarsProvider(options) {
setColorScheme,
setMode,
systemMode,
- theme.colorSchemeSelector,
+ memoTheme.colorSchemeSelector,
],
);
@@ -285,13 +292,12 @@ export default function createCssVarsProvider(options) {
const element = (
-
+
{children}
- {shouldGenerateStyleSheet && }
+ {shouldGenerateStyleSheet && (
+
+ )}
);