-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[material-ui][AppBar] color="inherit"
is inconsistent between ThemeProvider and experimental_CssVarsProvider
#42379
Comments
color
="inherit"` is inconsistent between ThemeProvider and experimental_CssVarsProvidercolor="inherit"
is inconsistent between ThemeProvider and experimental_CssVarsProvider
It's a bug. In version 6, the behavior is different (see example), but still incorrect. Both Is it confirmed that when the App Bar has the color |
color="inherit"
is inconsistent between ThemeProvider and experimental_CssVarsProvidercolor="inherit"
is inconsistent between ThemeProvider and experimental_CssVarsProvider
@ZeeshanTamboli the discussion on this PR seems to indicate that |
It's a regression from #32835. I have created two separate PRs to fix it for v5 and v6 since the code is different for both. |
Steps to reproduce
Link to live example: Code Sandbox
Steps:
In the above code sandbox, it's got the exact same setup for both pairs of AppBars, but the top one uses
ThemeProvider
andcreateTheme
, while the bottom one usesexperimental_CssVarsProvider
andexperimental_extendTheme
, but the ones that use "inherit" are different colors.Current behavior
The AppBar's background color is the color if the element underneath it. (which is what the "transparent" color is meant to do)
Expected behavior
The AppBar's background color should be the default Paper color.
Context
We just want the AppBar to be the default Paper background color 😄
Your environment
npx @mui/envinfo
System:
OS: macOS 14.5
Binaries:
Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
npm: 8.19.4 - ~/Git/settings-mfe/node_modules/.bin/npm
pnpm: Not Found
Browsers:
Chrome: 125.0.6422.112
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: ^11.11.3 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.36
@mui/core-downloads-tracker: 5.15.9
@mui/icons-material: ^5.15.13 => 5.15.13
@mui/material: ^5.15.4 => 5.15.9
@mui/private-theming: 5.15.9
@mui/styled-engine: 5.15.9
@mui/system: ^5.15.4 => 5.15.9
@mui/types: 7.2.13
@mui/utils: 5.15.9
@mui/x-date-pickers: ^6.19.0 => 6.19.4
@types/react: ^18.2.43 => 18.2.55
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.2.2 => 5.3.3
Search keywords: inherit AppBar experimental_CssVarsProvider experimental_extendTheme
The text was updated successfully, but these errors were encountered: