Skip to content

[Tabs] Improve color management #24286

@skondrashov

Description

@skondrashov

Tabs by default receive the MuiTab-textColorInherit class, which for some reason sets their opacity to .7. Honestly I don't know what I'm missing, it's not in the docs but nobody on the internet seems to have complained about this. I can't imagine why this was included except to discourage developers from using inherit, in which case shouldn't it just be removed, or at least an opt-in behavior instead of a default? It's been in the code for 3 years but I can't wrap my mind around the decision here. At risk of stating the obvious, I expected that Tabs using inherited colors would be colored with the colors they inherited, and not mixed with 30% of the colors behind them. I'm forced to add an opacity rule to my theme for tabs if I want the obvious behavior, and figure out on my own why the colors are wrong given that it doesn't appear to be documented.

What you need to put in your theme overrides to fix this in case other people find this:

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      textColorInherit: {
        opacity: 1,
      },
    },
  },
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    breaking changeIntroduces changes that are not backward compatible.ready to takeHelp wanted. Guidance available. There is a high chance the change will be acceptedscope: tabsChanges related to the tabs.type: new featureExpand the scope of the product to solve a new problem.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions