From 836cbaee03e190e83eb288105bd09b9386a51917 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 14 Feb 2023 14:34:33 +0700
Subject: [PATCH 1/3] fix setState on render

---
 docs/src/modules/components/MaterialYouUsageDemo.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/modules/components/MaterialYouUsageDemo.tsx b/docs/src/modules/components/MaterialYouUsageDemo.tsx
index 4ffb8fa0583ab6..6f292bef3ac1ce 100644
--- a/docs/src/modules/components/MaterialYouUsageDemo.tsx
+++ b/docs/src/modules/components/MaterialYouUsageDemo.tsx
@@ -93,11 +93,11 @@ export const prependLinesSpace = (code: string, size: number = 2) => {
   return newCode.join('\n');
 };
 
-function ModeSwitcher({ md2Mode }: { md2Mode: Mode | undefined }) {
-  const { mode, setMode } = useColorScheme();
-  if (md2Mode && mode !== md2Mode) {
-    setMode(md2Mode ?? mode);
-  }
+function ModeSwitcher({ md2Mode }: { md2Mode: Mode }) {
+  const { setMode } = useColorScheme();
+  React.useEffect(() => {
+    setMode(md2Mode);
+  }, [md2Mode, setMode]);
   return null;
 }
 

From ad04c2ea2670814e5507ed2236b75483142e4c98 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 14 Feb 2023 14:35:18 +0700
Subject: [PATCH 2/3] change css var prefix to `md`

---
 packages/mui-material-next/src/styles/extendTheme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts
index 0b58148f721dd0..ab9dda0d457531 100644
--- a/packages/mui-material-next/src/styles/extendTheme.ts
+++ b/packages/mui-material-next/src/styles/extendTheme.ts
@@ -49,10 +49,10 @@ function setColor(obj: any, key: string, defaultValue: any) {
   obj[key] = obj[key] || defaultValue;
 }
 
-export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
+export const createGetCssVar = (cssVarPrefix = 'md') => systemCreateGetCssVar(cssVarPrefix);
 
 export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: any[]) {
-  const { colorSchemes: colorSchemesInput = {}, cssVarPrefix = 'mui', ...input } = options;
+  const { colorSchemes: colorSchemesInput = {}, cssVarPrefix = 'md', ...input } = options;
   const getCssVar = createGetCssVar(cssVarPrefix);
 
   const md3LightColors = createMd3LightColorScheme(getCssVar, md3CommonPalette);

From c6ffe0dbd9ba556ae11508c1adb86c0b5423ee5d Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 14 Feb 2023 16:19:17 +0700
Subject: [PATCH 3/3] add tests

---
 .../src/styles/extendTheme.test.ts                 | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 packages/mui-material-next/src/styles/extendTheme.test.ts

diff --git a/packages/mui-material-next/src/styles/extendTheme.test.ts b/packages/mui-material-next/src/styles/extendTheme.test.ts
new file mode 100644
index 00000000000000..89ae867d9881f8
--- /dev/null
+++ b/packages/mui-material-next/src/styles/extendTheme.test.ts
@@ -0,0 +1,14 @@
+import { expect } from 'chai';
+import { extendTheme } from '@mui/material-next/styles';
+
+describe('Material You — extendTheme', () => {
+  it('should have default cssVarPrefix', () => {
+    expect(extendTheme().cssVarPrefix).to.equal('md');
+  });
+
+  it('`getCssVar` return default prefix', () => {
+    expect(extendTheme().getCssVar('palette-primary-main')).to.equal(
+      'var(--md-palette-primary-main)',
+    );
+  });
+});