diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index d1f60b6a9960d6..8b6d7b70ad1b82 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/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)',
diff --git a/packages/mui-material/src/AppBar/AppBar.test.js b/packages/mui-material/src/AppBar/AppBar.test.js
index 9084206c03eca8..6319ef4b5f7a6a 100644
--- a/packages/mui-material/src/AppBar/AppBar.test.js
+++ b/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('', () => {
@@ -62,4 +64,42 @@ describe('', () => {
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(
+
+
+ Hello World
+
+ ,
+ );
+
+ 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(
+
+
+ Hello World
+
+ ,
+ );
+
+ const appBar = screen.getByTestId('root');
+ expect(appBar).toHaveComputedStyle({
+ backgroundColor: hexToRgb(defaultTheme.palette.background.paper),
+ });
+ });
});