[material-ui][AppBar] Fix inherit color is inconsistent between ThemeProvider and CssVarsProvider (#42714)

Author: ZeeshanTamboli

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

@@ -123,14 +123,16 @@ const AppBarRoot = styled(Paper, {
         },
       })),
     {
-      props: { enableColorOnDark: true },
+      props: (props) =>
+        props.enableColorOnDark === true && !['inherit', 'transparent'].includes(props.color),
       style: {
         backgroundColor: 'var(--AppBar-background)',
         color: 'var(--AppBar-color)',
       },
     },
     {
-      props: { enableColorOnDark: false },
+      props: (props) =>
+        props.enableColorOnDark === false && !['inherit', 'transparent'].includes(props.color),
       style: {
         backgroundColor: 'var(--AppBar-background)',
         color: 'var(--AppBar-color)',

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

@@ -3,6 +3,8 @@ import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import AppBar, { appBarClasses as classes } from '@mui/material/AppBar';
 import Paper from '@mui/material/Paper';
+import { ThemeProvider, CssVarsProvider, hexToRgb } from '@mui/material/styles';
+import defaultTheme from '../styles/defaultTheme';
 import describeConformance from '../../test/describeConformance';
 
 describe('<AppBar />', () => {
@@ -62,4 +64,42 @@ describe('<AppBar />', () => {
       expect(appBar).to.have.class('mui-fixed');
     });
   });
+
+  it('should inherit Paper background color with ThemeProvider', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    render(
+      <ThemeProvider theme={defaultTheme}>
+        <AppBar data-testid="root" color="inherit">
+          Hello World
+        </AppBar>
+      </ThemeProvider>,
+    );
+
+    const appBar = screen.getByTestId('root');
+    expect(appBar).toHaveComputedStyle({
+      backgroundColor: hexToRgb(defaultTheme.palette.background.paper),
+    });
+  });
+
+  it('should inherit Paper background color with CssVarsProvider', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    render(
+      <CssVarsProvider>
+        <AppBar data-testid="root" color="inherit">
+          Hello World
+        </AppBar>
+      </CssVarsProvider>,
+    );
+
+    const appBar = screen.getByTestId('root');
+    expect(appBar).toHaveComputedStyle({
+      backgroundColor: hexToRgb(defaultTheme.palette.background.paper),
+    });
+  });
 });