[material-ui][Paper] Wrong background color shading when elevation=0 and using dark theme with `cssVariables`

[viliket]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-tucwch?file=src%2FApp.tsx

Steps:

1. Use ThemeProvider with a theme created using createTheme which has cssVariables: true, colorSchemes: { dark: true } and defaultColorScheme: 'dark'.
2. Use Paper component with elevation={0} and try nesting it with another Paper component with a higher elevation, e.g. elevation={24}.

Current behavior

The Paper component with elevation={0} has wrong background color shading which it inherits from the parent Paper component. This happens because due to a bug the Paper component:

https://github.com/mui/material-ui/blob/64aaf564c82cd8bd709116ad38123dbcab8d3bfb/packages/mui-material/src/Paper/Paper.js#L121C54-L121C63

where the --Paper-overlay CSS variable value is set as theme.vars.overlays?.[elevation]. The issue is the that the theme.vars.overlays object has no entry for the 0 elevation so this CSS variable ends up undefined. Therefore the Paper component has no --Paper-overlay CSS variable defined so it wrongly inherits it from the closest parent (if exists) and therefore the background-image property has wrong value leading to wrong shading.

Expected behavior

The Paper component with elevation={0} should have correct background color shade when using dark color scheme and CSS variables.

Context

This problem occurs e.g. if one tries to use an AppBar / Paper component with elevation={0} within a Dialog component with a theme with CSS variables and dark color scheme. This causes the AppBar / Paper component to display with wrong background color as it inherits it wrongly from the Dialog component.

Your environment

npx @mui/envinfo

Using Stackblitz for the bug reproduction so just listing the dependencies as is.

"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": "^6.0.2",
"@mui/material-pigment-css": "^6.0.2",
"@types/react": "18.3.5",
"@types/react-dom": "18.3.0",
"react": "18.3.1",
"react-dom": "18.3.1"

Search keywords: paper cssvariables elevation background color

[siriwatknp]

Thanks for reporting the issue. The workaround is to use the theme:

const theme = createTheme({
  cssVariables: true,
  colorSchemes: {
    dark: true,
  },
  defaultColorScheme: 'dark',
  components: {
    MuiPaper: {
      variants: [
        { props: { elevation: 0 }, style: { '--Paper-overlay': 'none'} },
      ]
    }
  }
});

[ZeeshanTamboli]

Created PR to fix it: #43723