React：如何在三元组中添加多个样式类？

Question

I am using makeStyles within my component, but want to add a ternary to switch between 2 different styles.

I have the following:

Import ing classNames

import classNames from 'classnames';

And using it within my component:

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

But none of these work. Inspecting the element I don't see any classes appearing.

Would anyone know how I could achieve this?

Answer 1

Not 100% sure but first try with import classnames from "classnames"

And second you can do

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

Refer for more info https://www.npmjs.com/package/classnames#usage