search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.44k stars 31.84k forks source link

[material-ui][AppBar] `color="inherit"` is inconsistent between ThemeProvider and experimental_CssVarsProvider #42379

Open jacobwahoo opened 1 month ago

jacobwahoo commented 1 month ago

Steps to reproduce

Link to live example: Code Sandbox

Steps:

  1. Create an App that uses experimental_CssVarsProvider with experimental_extendTheme
  2. Set a background color on an element
  3. Inside the element with the background color, add an AppBar component with color set to "inherit"

In the above code sandbox, it's got the exact same setup for both pairs of AppBars, but the top one uses ThemeProvider and createTheme, while the bottom one uses experimental_CssVarsProvider and experimental_extendTheme, but the ones that use "inherit" are different colors.

Screenshot 2024-05-24 at 10 10 33 AM

Current behavior

The AppBar's background color is the color if the element underneath it. (which is what the "transparent" color is meant to do)

Expected behavior

The AppBar's background color should be the default Paper color.

Context

We just want the AppBar to be the default Paper background color 😄

Your environment

npx @mui/envinfo System: OS: macOS 14.5 Binaries: Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node npm: 8.19.4 - ~/Git/settings-mfe/node_modules/.bin/npm pnpm: Not Found Browsers: Chrome: 125.0.6422.112 Edge: Not Found Safari: 17.5 npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.36 @mui/core-downloads-tracker: 5.15.9 @mui/icons-material: ^5.15.13 => 5.15.13 @mui/material: ^5.15.4 => 5.15.9 @mui/private-theming: 5.15.9 @mui/styled-engine: 5.15.9 @mui/system: ^5.15.4 => 5.15.9 @mui/types: 7.2.13 @mui/utils: 5.15.9 @mui/x-date-pickers: ^6.19.0 => 6.19.4 @types/react: ^18.2.43 => 18.2.55 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.3.3 ``` I used both Chrome and Firefox ```

Search keywords: inherit AppBar experimental_CssVarsProvider experimental_extendTheme

ZeeshanTamboli commented 3 weeks ago

It's a bug.

In version 6, the behavior is different (see example), but still incorrect. Both inherit and transparent behave the same.

Is it confirmed that when the App Bar has the color inherit, it should use the default background color of Paper (i.e., white) like with ThemeProvider, since the App Bar component inherits from the Paper component? cc @siriwatknp

jacobwahoo commented 1 week ago

@ZeeshanTamboli the discussion on this PR seems to indicate that inherit was already being used to get the Paper color, so they added transparent as an option to get the color of the parent component. https://github.com/mui/material-ui/pull/19393

ZeeshanTamboli commented 1 week ago

It's a regression from #32835. I have created two separate PRs to fix it for v5 and v6 since the code is different for both.