-1

因此，我在我的网络应用程序中使用react-tabs，该应用程序目前由三个组件组成（每个组件一个选项卡）。我有一个global.css已加载并应用于所有选项卡的文件。我还有三个单独的 CSS 文件，它们应该只应用于每个相应的选项卡。每个选项卡/组件都是一个单独的 JS 文件，并像这样导入相应的样式表：

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

但是由于我实现了 react-tabs，所有三个样式表都会全局加载，因此都应用于我不想要的每个选项卡。

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

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

[...]

render() {

        [...]

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

但它们仍然会在全球范围内加载。如何确保每个样式表/CSS 文件仅适用于相应的选项卡而没有其他内容，同时保持每个组件具有一个 CSS 文件的结构？

4

1 回答 1

0

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

另外我想说，如果您要编写超过一百行的 css，那么您可能需要多个 css，如果不是，那么一个 css 文件不会有太大的不同。

于 2019-07-09T04:13:24.463 回答