Реагирует className - element.module. css + state.conditional - PullRequest
Новая
       22

Реагирует className - element.module. css + state.conditional

0 голосов
/ 30 марта 2020

Я пытаюсь сделать мобильное раскрывающееся меню для веб-приложения React.

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

Вот мой код. 

<div className={[css.mainNavigation, `${this.state.isActive === true ? 'active' : ''}`].join(' ')}>
 </div>

Код добавляет .active к моему элементу, однако стиль для .active не проходит.

В моем navbar.module.s css следующий код - соответствующие строки. 

@media (max-width: 650px) {
      .mainNavigation {
        display: none;
      }
      .active {
        display: flex;
      }
    }

Я предполагаю, что он имеет что-то связанное с тем фактом, что на внешнем интерфейсе, после того, как весь код отрисован, импортированный модуль стиля s css использует другое имя класса, чем я устанавливаю. Например, когда я использую имя класса <div className={css.mainNavigation}>, на внешнем интерфейсе это выглядит так: 

<div class="_1jGJsP2ItGoSSFd9cLCFqV ">

И после нажатия вот так 

<div class="_1jGJsP2ItGoSSFd9cLCFqV active">

Все же .active css, в моем modular.scss файле не проходит.

Ответы [ 2 ]

1 голос
/ 30 марта 2020

Хотя вы можете сделать это вручную, я рекомендую вам попробовать clsx https://github.com/lukeed/clsx Это очень маленькая утилита, разработанная для того, чтобы делать именно то, что вы хотите, и она также довольно проста в использовании.

Вы также можете go для имен классов, которые более популярны https://github.com/JedWatson/classnames

0 голосов
/ 30 марта 2020

Я понял это.

Мне нужно было добавить className как css.active, а не active. 

${this.state.isActive === true ? css.active : ''}
...