[material-ui][Paper] Fix wrong background-image on Paper when elevation is 0 (#43723)

Author: ZeeshanTamboli

packages/mui-material/src/Paper/Paper.test.js

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui/internal-test-utils';
+import {
+  createRenderer,
+  strictModeDoubleLoggingSuppressed,
+  screen,
+} from '@mui/internal-test-utils';
 import Paper, { paperClasses as classes } from '@mui/material/Paper';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
@@ -110,4 +114,33 @@ describe('<Paper />', () => {
       ]);
     });
   });
+
+  it('should have no boxShadow or background-image on Paper with elevation 0 in dark mode using CSS variables', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const theme = createTheme({
+      cssVariables: true,
+      colorSchemes: {
+        dark: true,
+      },
+      defaultColorScheme: 'dark',
+    });
+
+    render(
+      <ThemeProvider theme={theme}>
+        <Paper data-testid="parent" elevation={23}>
+          elevation=23
+          <Paper data-testid="child" elevation={0} />
+        </Paper>
+      </ThemeProvider>,
+    );
+
+    const childPaper = screen.getByTestId('child');
+    expect(childPaper).toHaveComputedStyle({
+      boxShadow: 'none',
+      backgroundImage: 'none',
+    });
+  });
 });

packages/mui-material/src/styles/createColorScheme.ts

@@ -4,7 +4,7 @@ import getOverlayAlpha from './getOverlayAlpha';
 
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
-    return undefined;
+    return 'none';
   }
   const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;

packages/mui-material/src/styles/excludeVariablesFromRoot.test.ts

@@ -3,6 +3,7 @@ import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 
 describe('excludeVariablesFromRoot', () => {
   it('should return true', () => {
+    expect(excludeVariablesFromRoot('mui').includes(`--mui-overlays-0`)).to.equal(true);
     expect(excludeVariablesFromRoot('mui').includes(`--mui-overlays-1`)).to.equal(true);
     expect(excludeVariablesFromRoot('mui').includes(`--mui-overlays-2`)).to.equal(true);
     expect(excludeVariablesFromRoot('mui').includes(`--mui-overlays-3`)).to.equal(true);

packages/mui-material/src/styles/excludeVariablesFromRoot.ts

@@ -2,8 +2,8 @@
  * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
  */
 const excludeVariablesFromRoot = (cssVarPrefix?: string) => [
-  ...[...Array(24)].map(
-    (_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`,
+  ...[...Array(25)].map(
+    (_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index}`,
   ),
   `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`,
   `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`,

packages/mui-material/src/styles/extendTheme.test.js

@@ -345,14 +345,14 @@ describe('extendTheme', () => {
       const theme = extendTheme({ defaultColorScheme: 'dark' });
       expect(theme.colorSchemes.dark.overlays).to.have.length(25);
 
-      expect(theme.colorSchemes.dark.overlays[0]).to.equal(undefined);
+      expect(theme.colorSchemes.dark.overlays[0]).to.equal('none');
       expect(theme.colorSchemes.dark.overlays[24]).to.equal(
         'linear-gradient(rgba(255 255 255 / 0.165), rgba(255 255 255 / 0.165))',
       );
     });
 
     it('should override the array as expected', () => {
-      const overlays = Array(24).fill('none');
+      const overlays = Array(25).fill('none');
       const theme = extendTheme({
         defaultColorScheme: 'dark',
         colorSchemes: { dark: { overlays } },