Material-ui: Easier way to override not-selected tab color

[paour]

For a specific tab bar, I wanted to tweak the color of not-currently-selected tabs to make it more different from the disabled state. Using the classes system, I had to override rootPrimary (expected), but since that style is applied to all three states of the tab, I had to also override rootPrimaryDisabled and rootPrimarySelected.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

It would be easier if there was an extra class rootPrimaryUnselected that I could use to set just the attributes specific to the unselected state, while rootPrimary would contain attributes common to all three states.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.23 |
| React | 15.6.2 |
| browser | |
| etc | |

[kgregory]

It seems like changing rootPrimary should be enough, but if we override the rootPrimary, the new class does not seem to have the same precedence, so it appears to override rootPrimarySelected and rootPrimaryDisabled, despite the deliberate ordering of the applied classes here: https://github.com/mui-org/material-ui/blob/1c212d61e877cda72399e065f050b110d29fa0a6/src/Tabs/Tab.js#L175-L185

@oliviertassinari is this expected specificity behavior with class overrides? Seems that way.

[oliviertassinari]

@paour Bootstrap solves this issue by increasing the specificity of the disabled and selected state. It's the only solution I can think of. To give an idea of what that looks like in practice.

Before

rootAccent: {
  color: theme.palette.text.secondary,
},
rootAccentSelected: {
  color: theme.palette.secondary.A200,
},
rootAccentDisabled: {
  color: theme.palette.text.disabled,
},
rootPrimary: {
  color: theme.palette.text.secondary,
},
rootPrimarySelected: {
  color: theme.palette.primary[500],
},
rootPrimaryDisabled: {
  color: theme.palette.text.disabled,
},

After

rootAccent: {
  color: theme.palette.text.secondary,
  '&$rootSelected': {
    color: theme.palette.secondary.A200,
  },
  '&$rootDisabled': {
    color: theme.palette.text.disabled,
  },
},
rootPrimary: {
  color: theme.palette.text.secondary,
  '&$rootSelected': {
    color: theme.palette.primary[500],
  }
  '&$rootDisabled': {
    color: theme.palette.text.disabled,
  },
},
rootSelected: {}
rootDisabled: {}

This would be an important a profound change.

[oliviertassinari]

despite the deliberate ordering of the applied classes here

@kgregory The order of the class names in the DOM doesn't matter.

[oliviertassinari]

I'm in favor of such change.

[kgregory]

Sounds good