[Tab] Make active tab change background color and themable

[mateeyow]

Problem description

I want to style my tab to a different background color when it is active. I also want to have it on muiTheme if possible.

Versions

• Material-UI: Latest
• React: Latest
• Browser: All

[acsakshay]

@oliviertassinari, It would have been great if you could add the option to set selectedBackgroundColor in the getMuiThemes.js

Changes that I had to do in order to override the settings for getting the desired result are -

material-ui/styles/getMuiTheme.js
tabs: { backgroundColor: palette.primary1Color, textColor: (0, _colorManipulator.fade)(palette.alternateTextColor, 0.7), selectedTextColor: palette.alternateTextColor, selectedBackgroundColor: palette.primary1Color },

material-ui/Tabs/Tab.js
return { root: { color: props.selected ? tabs.selectedTextColor : tabs.textColor, backgroundColor: props.selected ? tabs.selectedBackgroundColor : tabs.backgroundColor, fontWeight: 500, fontSize: 14, width: props.width, textTransform: 'uppercase', padding: 0 },

const for muiTheme(in app.jsx)
const muiTheme1 = getMuiTheme({ tabs: { backgroundColor: '#FFFFFF', textColor: '#000000', selectedTextColor: '#FFFFFF', selectedBackgroundColor: '#000000', } })

I am not sure if it breaks anything or it affects other settings, please correct me if I am wrong. Also if you can include the setting in you next release it would be of great help for other users as well and not requiring to maintain forked copies.

Thanks a million.

Cheers!

[oliviertassinari]

The v0.x version is in low maintenance mode. We won't work on it. Please consider upgrading to the v1 versions.