Skip to content

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

@viliket

Description

@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

Metadata

Metadata

Labels

bug 🐛Something doesn't workcomponent: PaperThis is the name of the generic UI component, not the React module!package: material-uiSpecific to @mui/materialv6.x

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions