React: как добавить несколько классов стилей в тернар?

Question

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

У меня есть следующее:

Импорт имен классов

import classNames from 'classnames';

И используя его в моем компоненте:

            <Badge
              className={
                badgeProps.badgeContent === ''
                  ? classNames(classes.MuiBadge, classes.MuiBadgeDotted)
                  : classNames(classes.MuiBadge, classes.MuiBadgeNumber)
              }

Но ничего из этого не работает. При проверке элемента я не вижу никаких классов.

Кто-нибудь знает, как я могу этого добиться?

Answer 1

Не уверен на 100%, но сначала попробуйте с import classnames from "classnames"

И, во-вторых, вы можете сделать

classnames(classes.MuiBadge, {
    [classes.MuiBadgeDotted]: badgeProps && !badgeProps.badgeContent,
    [classes.MuiBadgeNumber]:  badgeProps && badgeProps.badgeContent
})

Подробнее см. https://www.npmjs.com/package/classnames#usage