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), + }); + }); });