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

【问题标题】：React: how do I add multiple styling classes within a ternary?React：如何在三元组中添加多个样式类？
【发布时间】：2020-05-05 02:58:56
【问题描述】：

我在我的组件中使用makeStyles，但想添加一个三元来在两种不同的样式之间切换。

我有以下几点：

导入类名

import classNames from 'classnames';

并在我的组件中使用它：

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

但这些都不起作用。检查元素我没有看到任何类出现。

有人知道我是如何做到这一点的吗？

【问题讨论】：

classNames 函数是什么，classes 对象是什么？
从import classNames from 'classnames';导入
嗯，可能是时间问题。为了排除它，如果您在渲染之前为每个类名集设置两个常量，然后执行三元 - 它有效吗？
我无法复制。你能制作一个实时的 Stack Snippet 来说明这个问题吗？
classnames.module.css ?为 .module.css 做出反应以读取样式

标签： reactjs typescript

【解决方案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

【讨论】：

请提供将答案标记为无用的原因。人们在这里提供帮助，利用他们宝贵的时间。