Как создать отдельные стили для каждой реагирующей вкладки?

Question

Поэтому я использую реагировать на вкладки для своего веб-приложения, которое в настоящее время состоит из трех компонентов (по одной вкладке каждый). У меня есть global.css, который загружается и применяется ко всем вкладкам. У меня также есть три отдельных CSS-файла, которые следует применять только к каждой соответствующей вкладке. Каждая вкладка / компонент представляет собой отдельный JS-файл и импортирует соответствующую таблицу стилей следующим образом:

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

Но поскольку я реализовал реагирующие вкладки, все три таблицы стилей загружаются глобально и, следовательно, все применяются к каждой вкладке, которая мне не нужна.

Я пробовал это для каждой вкладки:

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

[...]

render() {

        [...]

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

Но они все еще загружаются во всем мире. Как я могу убедиться, что каждый файл таблицы стилей / CSS-файл применяется только к соответствующей вкладке и ничего больше, сохраняя структуру наличия одного CSS-файла на компонент?

Answer 1

Я бы предложил использовать конкретный идентификатор для написания CSS, поскольку каждая вкладка имеет собственный идентификатор, чтобы эти CSS отражались только для конкретной вкладки.

Также я бы сказал, что если вы пишете более сотни строк CSS, то вам может потребоваться несколько CSS, если нет, то один файл CSS не будет иметь большого значения.

Answer 2

Вы можете использовать таблицу стилей Sass для определения стилей для некоторой области, для этого не забудьте yarn add node-sass. Вы должны дать разные имена классов каждой вкладке и переместить ваши стили в область действия этих классов. Быстрый взгляд

В качестве альтернативы, вы можете использовать модули React css, вот простой пример использования