Блог

Я использую Material UI с React, у меня есть div:

 <div className={classes.div}></div>
  

Я хочу добавить к нему условный класс:

 <div className={classes.div   divActive ? `${classes.div}__active` : ''}></div>
  

Второй пример не работает — он всегда возвращается <div class="makeStyles-div-2__active"></div> туда, где должен быть:

divActive false: <div class="makeStyles-div-2"></div>

divActive true: <div class="makeStyles-div-2 makeStyles-div-2__active"></div>

Чего мне не хватает? Я попытался classes.div вставить дополнительный литерал шаблона, например:

<div className={`${classes.div}` divActive ? `${classes.div}__active` : ''}></div>

Но те же результаты. Когда я удаляю первый класс ( classes.div ) divActive , кажется, что переключатель if работает и переключается между активным / неактивным, поэтому я предполагаю, что моя проблема заключается в первой переменной, но что в этом плохого?

Заключите троичное условие в круглые скобки и добавьте немного пробелов, когда divActive возвращает true

 <div className={classes.div   (divActive ? ` ${classes.div}__active` : '')}></div>