Material-UI Tabs: Change active tab text color

Question

I have the following object:

const tabStyle = {
    default_tab:{
        color: '#68C222',
        width: '33.3%',
        backgroundColor: '#FFFFFF',
        fontSize: 15
    },
    active_tab:{
        color: grey700,
        width: '33.3%',
        backgroundColor: '#FFFFFF',
        fontSize: 15
    }
};

When a tab is clicked, I want to be able to use the active_tab settings. Basically I want it to use the same color for the Tab text as I have for the background color of the inkBarStyle (color of the selected tab indicator) below.

<Tabs tabItemContainerStyle={{backgroundColor: '#FFFFFF', width: '30%'}} inkBarStyle={{backgroundColor: '#68C222', width: '33.3%'}} >
                <Tab style={tabStyle.active_tab} label='Tab1' >
                </Tab>
                <Tab style={tabStyle.default_tab} label='Tab2' >
                </Tab>
                <Tab style={tabStyle.default_tab} label='Tab3' >
                </Tab>
            </Tabs>

There is an onChange property on Tabs and onActive property on Tab that I may be able to use, but I'm not sure how to go about it.

Answer 1

Store your active tab index in state in the onChange event handler for <Tabs />. Then, for your <Tab /> component, you can do a conditional in the style prop:

handleTabChange (index) {
    this.setState({
        activeIndex: index
    });
}

getStyle (isActive) {
    return isActive ? tabStyle.active_tab : tabStyle.default_tab
}

render() {
    const { activeIndex } = this.state;
    return (
        <Tabs onChange={this.handleTabChange}>
            <Tab style={ this.getStyle(activeIndex === 1) } label='Tab1' ></Tab>
            <Tab style={ this.getStyle(activeIndex === 2) } label='Tab2' ></Tab>
            <Tab style={ this.getStyle(activeIndex === 3) } label='Tab3' ></Tab>
        </Tabs>
    )
}