-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
Description
Steps to reproduce
Link to live example: https://stackblitz.com/edit/github-tucwch?file=src%2FApp.tsx
Steps:
- Use
ThemeProvider
with a theme created usingcreateTheme
which hascssVariables: true
,colorSchemes: { dark: true }
anddefaultColorScheme: 'dark'
. - Use
Paper
component withelevation={0}
and try nesting it with anotherPaper
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:
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
Assignees
Labels
Projects
Status