How to have separate styles for each react-tab?

Question

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?

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. — Sumit Patel, Jul 08 '19 at 12:25
@SumitPatel Probably possible but would't that defeat the purpose of having multiple CSS-files in the first place? — , Jul 08 '19 at 12:30
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 want make much difference. — Sumit Patel, Jul 08 '19 at 12:35
Css file once loaded is applied globally, the only way to make it apply at the desired place is to name the classes according to the component. The purpose to have multiple css files is to differentiate the scope for the developer. — Monika Mangal, Jul 08 '19 at 13:25

score 0 · Accepted Answer · answered Jul 09 '19 at 04:13

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.

How to have separate styles for each react-tab?

1 Answers1