Easier way to override not-selected tab color

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.

• 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

[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.

[kgregory]

Sounds good