Material-UI 选项卡：更改活动选项卡文本颜色

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 设置。基本上我希望它使用与下面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

我用一个简单的条件语句解决了它

 <Tabs value={value} onChange={this.handleChange}>
   <LinkTab style={{ textTransform: "none", fontSize: 16, fontWeight: value === 0 ? "bold" : "" }} ... />
   <LinkTab style={{ textTransform: "none", fontSize: 16, fontWeight: value === 1 ? "bold" : "" }} ... />
</Tabs>

Answer 2

如果你的组件还不是类组件，你必须升级它，因为你需要保持一个状态。

constructor() {
        super()
        this.state = {
             clickedTabs: []
        }
}

当一个标签被点击时，做一个更新状态的方法

onTabClick = tagLabel => { 
      this.setState((prevState, tagLabel) => {
          return prevState.tagLabel.push[tagLabel};
      });
  }

然后你的渲染Tab

render() {
return (
      <Tab 
         style={this.state.clickedTabs.find('Tab1') ? 
             'tabStyle.active_tab' : 
             'tabStyle.default_tab' } 
         onClick={this.onTabClick('Tab1')}
         label='Tab1' /> 
  );
}

Answer 3

在<Tabs /> 的onChange 事件处理程序中将您的活动标签索引存储在状态中。然后，对于您的 <Tab /> 组件，您可以在 style 属性中执行条件：

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