CODEWITHSUNDEEP
reactjstabsmaterial-ui
Julio Cornelio
Julio Cornelio

Reputation: 171

change active tab background color in react material-ui

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

Upvotes: 4

Views: 24309

Answers (4)

Enrique Briones Arcos
Enrique Briones Arcos

Reputation: 1158

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>

Upvotes: 4

Remi
Remi

Reputation: 5367

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

Upvotes: 3

Aman Sharma
Aman Sharma

Reputation: 63

You can simply do by the conditional rendering of styles, your styles should look like this

const styles = theme => ({

 default_tabStyle:{
 color: 'black',
 fontSize:11,
 backgroundColor: 'blue',
},

 active_tabStyle:{
 fontSize:11,
 color: 'white',
 backgroundColor: 'red',
}
})

Then in your Component 

class YourComponent extends Component {

 state = {
   value: 0,
   }

   handleChange = (event, value, index) => {
    this.setState({ value:value });
  }

  render(){
    const { classes } = this.props;

   return (
    <div>
     <AppBar position="static"  className={classes.appBarStyle}>
        <Tabs value={this.state.value} indicatorColor="#E18F68" 
            onChange={this.handleChange}
            fullWidth={true}
            scrollButtons="auto"
            >
          <Tab label="Tab01"
          className=
            {this.state.value===0 ? classes.active_tab :classes.default_tabStyle} />

          <Tab label="Tab02" 
           className=
            {this.state.value===1 ?classes.active_tab :classes.default_tabStyle}/>

             <Tab label="Tab02" 
           className=
            {this.state.value===2 ?classes.active_tab :classes.default_tabStyle
           }/>

           </Tabs>
         </AppBar>
    </div>
   )
  }
 }

By default, your tab will be at index 0 and as there is change at the index of tab active_tabStyle will apply.

Upvotes: 2

lawls544
lawls544

Reputation: 711

To customize the background color of the tabs and the color of the inkBar, it is recommended to customize the Material-UI theme itself. There are specific settings for these two colors.

const muiTheme = getMuiTheme({
    tabs: {
        backgroundColor: 'red'
    },
    inkBar: {
        backgroundColor: 'yellow'
    }
})

Details on customizing the theme can be found here: http://www.material-ui.com/#/customization/themes

Upvotes: 1

Related Questions