diff --git a/packages/mui-lab/src/Masonry/Masonry.test.js b/packages/mui-lab/src/Masonry/Masonry.test.js
index c5e56f2a0ac5b0..5194f2b95e5efa 100644
--- a/packages/mui-lab/src/Masonry/Masonry.test.js
+++ b/packages/mui-lab/src/Masonry/Masonry.test.js
@@ -25,7 +25,7 @@ describe('<Masonry />', () => {
     }),
   );
 
-  const theme = createTheme({ spacing: 8 });
+  const theme = createTheme({ cssVariables: false, spacing: 8 });
   const maxColumnHeight = 100;
 
   describe('render', () => {
diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 2eee979d62a4d2..3755c159300c8c 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import defaultTheme from '@mui/material/styles/defaultTheme';
 import Drawer, { drawerClasses as classes } from '@mui/material/Drawer';
 import { getAnchor, isHorizontal } from './Drawer';
 import describeConformance from '../../test/describeConformance';
@@ -37,8 +38,8 @@ describe('<Drawer />', () => {
         if (/jsdom/.test(window.navigator.userAgent)) {
           this.skip();
         }
-        const theme = createTheme();
-        const enteringScreenDurationInSeconds = theme.transitions.duration.enteringScreen / 1000;
+        const enteringScreenDurationInSeconds =
+          defaultTheme.transitions.duration.enteringScreen / 1000;
         render(
           <Drawer open>
             <div />
@@ -321,16 +322,13 @@ describe('<Drawer />', () => {
 
   describe('zIndex', () => {
     it('should set correct zIndex on the root element', () => {
-      const theme = createTheme();
       render(
-        <ThemeProvider theme={theme}>
-          <Drawer open>
-            <div />
-          </Drawer>
-        </ThemeProvider>,
+        <Drawer open>
+          <div />
+        </Drawer>,
       );
       expect(document.querySelector(`.${classes.root}`)).toHaveComputedStyle({
-        zIndex: String(theme.zIndex.drawer),
+        zIndex: String(defaultTheme.zIndex.drawer),
       });
     });
   });
diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
index 68ce2ec894958f..3912ff620302b4 100644
--- a/packages/mui-material/src/Grid/Grid.test.js
+++ b/packages/mui-material/src/Grid/Grid.test.js
@@ -155,14 +155,13 @@ describe('Material UI <Grid />', () => {
     });
 
     it('should generate correct responsive styles regardless of breakpoints order', () => {
-      const theme = createTheme();
       expect(
         generateDirection({
           ownerState: {
             container: true,
             direction: { sm: 'column', xs: 'row' },
           },
-          theme,
+          theme: defaultTheme,
         }),
       ).to.deep.equal({
         '@media (min-width:0px)': {
@@ -210,6 +209,7 @@ describe('Material UI <Grid />', () => {
 
     it('should generate correct responsive styles regardless of custom breakpoints order', () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           keys: ['mobile', 'desktop'],
           values: {
@@ -713,14 +713,13 @@ describe('Material UI <Grid />', () => {
 
   describe('prop: rowSpacing, columnSpacing', () => {
     it('should generate correct responsive styles', () => {
-      const theme = createTheme();
       expect(
         generateRowGap({
           ownerState: {
             container: true,
             rowSpacing: { xs: 1, sm: 2 },
           },
-          theme,
+          theme: defaultTheme,
         }),
       ).to.deep.equal({
         '@media (min-width:0px)': {
@@ -743,7 +742,7 @@ describe('Material UI <Grid />', () => {
             container: true,
             columnSpacing: { xs: 1, sm: 2 },
           },
-          theme,
+          theme: defaultTheme,
         }),
       ).to.deep.equal({
         '@media (min-width:0px)': {
@@ -765,6 +764,7 @@ describe('Material UI <Grid />', () => {
 
     it('should support custom breakpoints and generate correct responsive styles', () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           keys: ['mobile', 'desktop'],
           values: {
@@ -824,6 +824,7 @@ describe('Material UI <Grid />', () => {
 
     it("shouldn't support custom breakpoints with values of zeros and shouldn't generate responsive styles", () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           keys: ['mobile', 'desktop'],
           values: {
@@ -872,6 +873,7 @@ describe('Material UI <Grid />', () => {
 
     it("shouldn't support custom breakpoints without its spacing values and shouldn't generate responsive styles", () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           keys: ['mobile', 'desktop'],
           values: {
@@ -918,6 +920,7 @@ describe('Material UI <Grid />', () => {
 
     it("should ignore custom breakpoints that doesn't exist in the theme and shouldn't generate responsive styles", () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           keys: ['mobile', 'desktop'],
           values: {
@@ -963,14 +966,13 @@ describe('Material UI <Grid />', () => {
     });
 
     it('should generate correct responsive styles regardless of breakpoints order ', () => {
-      const theme = createTheme();
       expect(
         generateRowGap({
           ownerState: {
             container: true,
             rowSpacing: { sm: 2, xs: 1 },
           },
-          theme,
+          theme: defaultTheme,
         }),
       ).to.deep.equal({
         '@media (min-width:0px)': {
@@ -993,7 +995,7 @@ describe('Material UI <Grid />', () => {
             container: true,
             columnSpacing: { sm: 2, xs: 1 },
           },
-          theme,
+          theme: defaultTheme,
         }),
       ).to.deep.equal({
         '@media (min-width:0px)': {
@@ -1015,6 +1017,7 @@ describe('Material UI <Grid />', () => {
 
     it('should generate correct responsive styles regardless of custom breakpoints order ', () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           keys: ['mobile', 'desktop'],
           values: {
@@ -1074,6 +1077,7 @@ describe('Material UI <Grid />', () => {
 
     it('should generate correct responsive styles for overriding with zero value styles for higher breakpoints', () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           values: {
             mobile: 0,
@@ -1208,6 +1212,7 @@ describe('Material UI <Grid />', () => {
 
     it('should not generate responsive styles for lower breakpoints below a given non-zero breakpoint', () => {
       const theme = createTheme({
+        cssVariables: false,
         breakpoints: {
           values: {
             mobile: 0,
diff --git a/packages/mui-material/src/Link/getTextDecoration.test.js b/packages/mui-material/src/Link/getTextDecoration.test.js
index cf15c993b1d48c..11f89a5d3a554b 100644
--- a/packages/mui-material/src/Link/getTextDecoration.test.js
+++ b/packages/mui-material/src/Link/getTextDecoration.test.js
@@ -4,7 +4,7 @@ import getTextDecoration from './getTextDecoration';
 
 describe('getTextDecoration', () => {
   describe('without theme.vars', () => {
-    const theme = createTheme();
+    const theme = createTheme({ cssVariables: false });
 
     it('deprecated color', () => {
       expect(getTextDecoration({ theme, ownerState: { color: 'textPrimary' } })).to.equal(
diff --git a/packages/mui-material/src/styles/styled.test.js b/packages/mui-material/src/styles/styled.test.js
index b547370b18f569..719596f0c8a315 100644
--- a/packages/mui-material/src/styles/styled.test.js
+++ b/packages/mui-material/src/styles/styled.test.js
@@ -62,6 +62,7 @@ describe('styled', () => {
     `;
 
     const theme = createTheme({
+      cssVariables: false,
       spacing: 10,
     });
 
@@ -82,6 +83,7 @@ describe('styled', () => {
     }));
 
     const theme = createTheme({
+      cssVariables: false,
       spacing: 10,
     });
 
@@ -140,6 +142,7 @@ describe('styled', () => {
 
     before(() => {
       theme = createTheme({
+        cssVariables: false,
         palette: {
           primary: {
             main: 'rgb(0, 0, 255)',
diff --git a/packages/mui-styles/test/theme-scoping.test.tsx b/packages/mui-styles/test/theme-scoping.test.tsx
index 2820deb0f12229..7c847d0208b8ef 100644
--- a/packages/mui-styles/test/theme-scoping.test.tsx
+++ b/packages/mui-styles/test/theme-scoping.test.tsx
@@ -66,6 +66,7 @@ describe('Theme scoping', () => {
       <material.ThemeProvider
         theme={{
           [material.THEME_ID]: material.createTheme({
+            cssVariables: false,
             palette: {
               divider: 'darken',
             },
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
index 3aef4d93cbf4c1..a22029b7de4d72 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -243,6 +243,10 @@ describe('createCssVarsProvider', () => {
     describe('[option]: `disableTransitionOnChange`', () => {
       clock.withFakeTimers();
 
+      beforeEach(() => {
+        document.head.replaceChildren([]);
+      });
+
       it('disable all css transitions when switching between modes, given `disableTransitionOnChange` is true', () => {
         const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
           theme: createCssVarsTheme({
@@ -268,7 +272,7 @@ describe('createCssVarsProvider', () => {
             <Consumer />
           </CssVarsProvider>,
         );
-
+        clock.runToLast();
         expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal(
           DISABLE_CSS_TRANSITION,
         );
@@ -309,7 +313,7 @@ describe('createCssVarsProvider', () => {
             <Consumer />
           </CssVarsProvider>,
         );
-
+        clock.runToLast();
         expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal(
           DISABLE_CSS_TRANSITION,
         );