javascript - Material-UI 标签 : Change active tab text color

Question

我有以下对象:

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

单击选项卡时，我希望能够使用 active_tab 设置。基本上，我希望它对 Tab 文本使用与我对下面 inkBarStyle(所选标签指示器的颜色)的背景颜色相同的颜色。

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

Tabs 上有一个onChange 属性，Tab 上有一个onActive 属性，我可以使用它们，但我不确定该怎么做。

Answer 1

将您的事件选项卡索引存储在 onChange 中的状态<Tabs /> 的事件处理程序.然后，为你的<Tab />组件，你可以在 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>
    )
}