盖茨比和类名库：根据div的内容应用CSS类

我有一个盖茨比项目和一个博客。我有一个标签云部分，显示博客帖子的标签。我在实际的博客帖子卡上也有一个按钮/标题，我希望它的样式与标签云中相应的标签相同，即如果标签云中的“新闻稿”有一个红色标签，我希望所有关于新闻稿的博客帖子卡都有一个红色按钮，如果“开始”有一个蓝色标签在标签云中，然后我想将所有博客帖子卡的标签设置为蓝色，以此类推

我有一个明信片组件，其中的博客帖子卡是样式化的。我使用库根据标记的值应用CSS样式，如下所示：

{post.tags && <div className={
                        classNames(styles.postCardTags, {
                            [tagStyles.hiddenTag]: primary_tag === `Data schema primary`,
                            [tagStyles.tagRed]: primary_tag === `Press Release`, 
                        })
                    }> 
                    <Tags post={post} visibility="public" autolink={false} />
                </div>}
    

{post.tags&&
}

上面的代码将标签的默认样式设置为

明信片标签

（我已将其设置为蓝色），并将值为“Press Release”的标签设置为红色

当我在

localhost:8000/

上本地运行时，它正确地应用了样式，“Press Release”标记正确地设置为红色。当我投入生产时，值为“Press Release”的标签没有正确地将其CSS类设置为

tagStyles.red

和blue。出于某种原因，

tagStyles.当项目在本地运行时，“新闻稿”标记设置为红色，但当推送到生产时，“新闻稿”标记设置为蓝色（即
style.postclast标记
）

为什么我的“新闻稿”标签在启用
localhost
时会应用样式
tagStyles.tagRed
，而在推送到实时站点时会应用类
styles.明信片标签
？这是盖茨比如何构建组件的问题吗？
我认为您不需要外部软件包（它将被捆绑以增加项目的大小）来实现此行为。删除包可能会解决您的问题，因为它可能有SSR（SServer-SideRendering）问题。我使用更改类名取决于一些参数（例如您的带有
标记的参数）或
道具的参数。尝试：

let classNames= post.tags === 'Press Releases' ? 'red' : 'blue' // change it to styling modules

{post.tags && <div className={`defaultClass ${classNames}`}> 
                    <Tags post={post} visibility="public" autolink={false} />
                </div>
}

let classNames=post.tags==='Press Releases'？'红色“：“蓝色”//将其更改为样式化模块
{post.tags&&
}

注意：您可以在
className
模板文本中添加逻辑，但使用外部变量更简洁

我不知道您的用例如何，如果需要，您可以更改
includes
函数的
post.tags==='Press Releases'

正如我所说，您可以改变这种行为，在那里添加CSS模块