[material-ui][AppBar] Fix inherit color is inconsistent between ThemeProvider and CssVarsProvider

[ZeeshanTamboli]

Fixes #42379

Before: https://codesandbox.io/p/sandbox/cool-goldstine-kfzyjk?file=%2Fsrc%2FApp.js%3A8%2C7
After: https://codesandbox.io/p/sandbox/material-ui-cra-ts-forked-z4c46h?file=%2Fsrc%2FApp.tsx%3A5%2C15

PR for v5: #42713

---

Proof that this is a regression from #32835 which was released in v5.8.5:

• Works in 5.8.4: code
• Breaks in 5.8.5: code

[mui-bot]

Netlify deploy preview

https://deploy-preview-42714--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 6bf7699

[DiegoAndai]

Hey @ZeeshanTamboli, thanks for working on this. I cannot access the Before and After Sandboxes:

@siriwatknp may I ask you to review this as well?

[ZeeshanTamboli]

@DiegoAndai Sorry, I didn't realize it was private. Seems like these days CodeSandbox sets them to private by default. I've made it public now, so you should be able to access it.

[DiegoAndai]

I'm not sure I understand the fix. Doesn't inherit rely on the --AppBar-color var being used?

material-ui/packages/mui-material/src/AppBar/AppBar.js

Line 94 in 523811b

'--AppBar-color': 'inherit',

. If color: var(--AppBar-color) is not added, the inherit color style doesn't work, does it?

Doesn't the transparent style apply very similar styles, and overrides these?

material-ui/packages/mui-material/src/AppBar/AppBar.js

Lines 150 to 159 in 523811b

	props: { color: 'transparent' },
	style: {
	'--AppBar-background': 'transparent',
	'--AppBar-color': 'inherit',
	backgroundColor: 'var(--AppBar-background)',
	color: 'var(--AppBar-color)',
	...theme.applyStyles('dark', {
	backgroundImage: 'none',
	}),
	},

[ZeeshanTamboli]

@DiegoAndai It can be a bit confusing, so I'll explain in detail.

When you provide a color prop to Material UI components, it doesn't just set the CSS color. It also handles the background color since there's no separate background color prop.

The issue is with the AppBar component's background color when the inherit color prop is used. When inherit is passed, it should apply the background color of the Paper component (which AppBar inherits from), not the containing and inherited element, in this case<div>. This logic is different from the CSS inherit value. The color value should be inherit, but the background-color should match the Paper component. I asked this in #42379 (comment). This is discussed in #19393 which was mentioned in #42379 (comment).

For transparent, the background-color should be transparent, revealing the element beneath it.

Inspecting the before code sandbox, you'll see the AppBar's background color when inherit is used is:

background-color: var(--AppBar-background);

But --AppBar-background isn't defined, causing the bug. Instead, we want the background color to apply that of Paper when inherit:

• With theme provider:

background-color: #fff;

• With CSS variables:

background-color: var(--mui-palette-background-paper);

So the fix is to avoid using background-color: var(--AppBar-background) for inherit and transparent, handling them separately. background-color: var(--AppBar-background) will be applied for other color prop values.

---

Proof that this is a regression from #32835 which was released in v5.8.5:

• Works in 5.8.4: code
• Breaks in 5.8.5: code

---

As mentioned in the PR description, there's a separate PR for v5: #42713 due to different code from v6.

[DiegoAndai]

Thanks @ZeeshanTamboli 💙