Как правильно задать класс?

Question

[MRcracker]

Использую в работе подход module.css. Для того, чтобы задать класс приходится писать
<div className={styles.tabsContentWrap}></div>
Что делать в том случае, когда я использую хуки и нужно указать несколько классов?

<div
          className={
            toggleState === 1 ? "tabsContent active-content" : "tabsContent"
          }
        >
</div>

Писать классы только глобально или есть возможность как-то их написать с использованием модулей css?

Answer 1

[Aetae]

Юзай classNames.
Без этой либы не жизнь.)

Answer 2

[deantek]

className={`tabsContent ${toggle === 1 ? 'toggle' : ''}`}

className={`${s.container} ${isMobile ? s.mobile_container : ''}`}>

Comments

[MRcracker]

Добавляется класс styles.tabsContent undefined

Answer 3

[Александр]

styles.tabsContentWrap резолвится в обычную строку
примитивно можно так делать

className={toggleState === 1 ? `${styles.tabsContentWrap} ${styles.activeContent}` : styles.tabsContent}

лучше посмотрите на библиотеку "classnames", она позволяет легко композировать классы

Comments

[MRcracker]

получаю два класса undefined undefined. В чем может быть ошибка не подскажите?

Answer 4

[Frontend developer]

https://www.npmjs.com/package/classnames

const className = classNames("tabsContent", {"active-content":  toggleState === 1});