[material-ui][AppBar] Fix inherit color is inconsistent between Theme…

…Provider and CssVarsProvider (#42713)
mui · Jul 11, 2024 · 7c65f7c · 7c65f7c
1 parent 3a920ad
commit 7c65f7c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
@@ -126,7 +126,9 @@ const AppBarRoot = styled(Paper, {
                 theme.vars.palette[ownerState.color].contrastText,
               ),
         }),
-      backgroundColor: 'var(--AppBar-background)',
+      ...(!['inherit', 'transparent'].includes(ownerState.color) && {
+        backgroundColor: 'var(--AppBar-background)',
+      }),
       color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)',
       ...(ownerState.color === 'transparent' && {
         backgroundImage: 'none',

diff --git a/packages/mui-material/src/AppBar/AppBar.test.js b/packages/mui-material/src/AppBar/AppBar.test.js
@@ -3,6 +3,12 @@ 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,
+  Experimental_CssVarsProvider as CssVarsProvider,
+  hexToRgb,
+} from '@mui/material/styles';
+import defaultTheme from '../styles/defaultTheme';
 import describeConformance from '../../test/describeConformance';
 
 describe('<AppBar />', () => {
@@ -62,4 +68,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),
+    });
+  });
 });