如何为每个 react-tab 设置单独的样式？

Question

所以我正在为我的 Web 应用程序使用 react-tabs，该应用程序目前由三个组件组成（每个组件一个选项卡）。我有一个 global.css 已加载并应用于所有选项卡。我还有三个单独的 CSS 文件，它们应该只应用于每个相应的选项卡。每个 tab/component 都是一个单独的 JS 文件并导入相应的样式 - sheet 如下所示：

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

但是自从我实现了 react-tabs 以来，所有三种样式-sheet 都在全局加载，因此它们都应用于我不想要的每个选项卡。

我对每个标签都试过这个：

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

[...]

render() {

        [...]

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

但它们仍然会在全球范围内加载。我怎样才能确保每个 style-sheet/CSS-file 只应用于相应的选项卡，而不是其他任何东西，同时保持每个组件有一个 CSS-File 的结构？

Answer 1

我建议使用特定的 id 来编写 css，因为每个选项卡都有自己的 id，这样 css 只会反映到特定的选项卡。

另外我想说的是，如果你写的 css 超过一百行，那么你可能需要多个 css ，如果不是，那么一个 css 文件不会有多大用处差异。

如何为每个 react-tab 设置单独的样式？

How to have separate styles for each react-tab?

javascript

css

jsx

reactjs

react-tabs