[material-ui] Tabs styles should adapt to App Bar

[rizTaak]

Steps to reproduce

Steps:

1. Open this link to live example: (required)
2. make sure window is wide enough to show the tabs
3. click on any tab

Current behavior

look and feel of the tabs within app bar is not correct

Expected behavior

look and feel should be consistent as per theme.

Context

adding tabs within app bar

Your environment

npx @mui/envinfo

    System:
    OS: macOS 14.6.1
  Binaries:
    Node: 22.15.0 - ~/.nvm/versions/node/v22.15.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.15.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.234
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.0.2 
    @mui/icons-material: ^7.0.2 => 7.0.2 
    @mui/material: ^7.0.2 => 7.0.2 
    @mui/private-theming:  7.0.2 
    @mui/styled-engine:  7.0.2 
    @mui/system:  7.0.2 
    @mui/types:  7.4.1 
    @mui/utils:  7.0.2 
    @types/react: ^19.1.2 => 19.1.2 
    react: ^19.1.0 => 19.1.0 
    react-dom: ^19.1.0 => 19.1.0 
    typescript: ^4.9.5 => 4.9.5 

Search keywords: appbar tabs

[brijeshb42]

@siriwatknp For AppBar, I see that the default value for color prop is primary even though a value of "default" exists for it.
Should AppBar have color="default" as the default value for the prop.

[siriwatknp]

@siriwatknp For AppBar, I see that the default value for color prop is primary even though a value of "default" exists for it. Should AppBar have color="default" as the default value for the prop.

The default value of the AppBar has been primary since the beginning (at least v5 https://v5.mui.com/material-ui/react-app-bar/).

I am not sure what's the meaning of <AppBar color="default">. However, it's not related to the author's issue. I think this issue is about context aware of the Tabs to automatically adapt to its background. So I mark as a new feature.

Workaround

@rizTaak the workaround is to add styles to the Tabs. Here is one way to do it with the sx prop:

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="basic tabs example"
  sx={{
    "& button": {
      color: "rgba(255 255 255 / 0.6)",
      "&.Mui-selected": { color: "inherit" },
    },
  }}
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

[aks30498]

@siriwatknp Can this be worked on? (we can have tab .selected to always have color inherit when it is a child of appbar and less opaque version of the color when inactive). I can try this as first issue.