@MRcracker

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

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


Писать классы только глобально или есть возможность как-то их написать с использованием модулей css?
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
Aetae
@Aetae
Тлен
Юзай classNames.
Без этой либы не жизнь.)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@deantek
className={`tabsContent ${toggle === 1 ? 'toggle' : ''}`}


className={`${s.container} ${isMobile ? s.mobile_container : ''}`}>
Ответ написан
aleksand44
@aleksand44
styles.tabsContentWrap резолвится в обычную строку
примитивно можно так делать
className={toggleState === 1 ? `${styles.tabsContentWrap} ${styles.activeContent}` : styles.tabsContent}

лучше посмотрите на библиотеку "classnames", она позволяет легко композировать классы
Ответ написан
@markak
Frontend developer
https://www.npmjs.com/package/classnames

const className = classNames("tabsContent", {"active-content":  toggleState === 1});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы