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設置。 基本上，我希望它為Tab文本使用與下面的inkBarStyle的背景色（所選的Tab指示器的顏色）相同的顏色。

<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 />的onChange事件處理程序中將處於活動狀態的選項卡索引存儲在狀態中。 然后，對於您的<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>
    )
}

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