[material-ui][AppBar] color="inherit" is inconsistent between ThemeProvider and experimental_CssVarsProvider

[jacobwahoo]

Steps to reproduce

Link to live example: Code Sandbox

Steps:

1. Create an App that uses experimental_CssVarsProvider with experimental_extendTheme
2. Set a background color on an element
3. Inside the element with the background color, add an AppBar component with color set to "inherit"

In the above code sandbox, it's got the exact same setup for both pairs of AppBars, but the top one uses ThemeProvider and createTheme, while the bottom one uses experimental_CssVarsProvider and experimental_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

I used both Chrome and Firefox

Search keywords: inherit AppBar experimental_CssVarsProvider experimental_extendTheme

[ZeeshanTamboli]

It's a bug.

In version 6, the behavior is different (see example), but still incorrect. Both inherit and transparent behave the same.

Is it confirmed that when the App Bar has the color inherit, it should use the default background color of Paper (i.e., white) like with ThemeProvider, since the App Bar component inherits from the Paper component? cc @siriwatknp

[jacobwahoo]

@ZeeshanTamboli the discussion on this PR seems to indicate that inherit was already being used to get the Paper color, so they added transparent as an option to get the color of the parent component.
#19393

[ZeeshanTamboli]

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.

• PR for v5: [material-ui][AppBar] Fix inherit color is inconsistent between ThemeProvider and CssVarsProvider #42713
• PR for v6: [material-ui][AppBar] Fix inherit color is inconsistent between ThemeProvider and CssVarsProvider #42714