javascriptcssreactjsjsxreact-tabs

How to have separate styles for each react-tab?

So I'm using react-tabs for my web app which is currently comprised of three component (one tab each). I have a global.css which is loaded and applied to all tabs. I also have three separate CSS-files which should only be applied to each corresponding tab. Each tab/component is a separate JS-file and imports the corresponding style-sheet like so:

import '../stylesheets/Corresponding.css';

But since I implemented react-tabs all three style-sheets get loaded globally and therefore all get applied to each tab which I do not want.

I tried this for each tab:

import styles from '../stylesheets/Corresponding.css';

[...]

render() {

        [...]

        return (
            <div className="App" style={styles}>
                {content}
            </div>
        );
    }

But they still get loaded globally. How can I make sure each style-sheet/CSS-file only applied to the corresponding tab and nothing else while keeping the structure of having one CSS-File per component?

Solution

  • I would suggest use particular id to write css as each tab have there own id so that way those css will reflect to particular tab only.

    Also I would say if you are writing more then a hundred line of css then you may required multiple css if not then one single css file wan't make much difference.