change active tab background color in react material-ui

Question

want to change background color on active tab from material-ui Tabs:

http://www.material-ui.com/#/components/tabs

already how to change the underline:

inkBarStyle={{background: 'red'}}

but background color changed

thank you very much

Answer 1

Try this

const CustomTab = withStyles({
  root: {
    backgroundColor: 'orange',
  },
  selected: {
    backgroundColor: 'purple',
  },
})(Tab);

and then

 <Tabs>
    <CustomTab label='One' />
    <CustomTab label='Two' />
    <CustomTab label='Three' />
 </Tabs>

Answer 2

Rather than updating one instance of the tab, perhaps it's better to update the theme in general. Then you wouldn't have to add the style to every individual use of that particular component.

Typically you'd have a theme file such as:

./themes/default/index.ts

import { createMuiTheme } from '@material-ui/core/styles';
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';

const overrides = {
  MuiTab: {
    // general overrides for your material tab component here
    root: {
      backgroundColor: 'red',
      '&$selected': {
        backgroundColor: 'blue',
      }
    },
  },
};

const theme = createMuiTheme( {
  overrides,
  breakpoints,
  palette,
  typography,
  shape,
});

Then in your application you can use this as:

./src/index.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { App } from './components';

ReactDOM.render(
  <MuiThemeProvider theme={themeSpec.theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root') as HTMLElement
);

Source: https://material-ui.com/customization/components/#global-theme-override

Default values can be found here: https://material-ui.com/customization/default-theme/

The overrides for components can be found here: https://github.com/mui-org/material-ui/blob/2726ab46b2b1789bdd0a9aa1a2ff249a443ab1a8/packages/material-ui/src/styles/overrides.d.ts#L91-L173

More info regarding the material themes: https://material-ui.com/customization/themes/#themes

Note: Examples in typescript to be a bit more thorough, but the same would go for vanilla javascript