CSS Modules React and Overriding CSS Classes CSS modules won’t allow you to safely override the active className (largely by design). Really it should be exposed via an API, e.g. ‘activeClassName’.
If the maintainers disagree or you need this quick then you can quite easily add your own active className because your implementing component is managing the index state:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import {Tab, Tabs} from 'react-toolbox'; import styles from './MyTabs.css'; class MyTabs extends React.Component { state = { index: 1 }; handleTabChange(index) { this.setState({ index }); } render() { const { index } = this.state; return ( <Tabs index={index} onChange={this.handleTabChange}> <Tab label="Tab0" className={index === 0 ? styles.active : null}> Tab 0 content </Tab> <Tab label="Tab1" className={index === 1 ? styles.active : null}> Tab 1 content </Tab> </Tabs> ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
