0

我有一个带有博客的 Gatsby 项目。我有一个标签云部分，显示博客文章的标签。我在实际的博客帖子卡片上还有一个按钮/标题，我想设置与标签云中相应标签相同的样式，即如果标签云中有“新闻稿”的红色标签，我想设置所有博客帖子的样式与新闻稿有关的卡片有一个红色按钮，如果标签云中有一个“入门”的蓝色标签，那么我想将所有带有“入门”标签的博客帖子卡的样式设置为蓝色，依此类推。

我有一个 PostCard 组件，其中设置了博客明信片的样式。我正在使用Classnames库根据标记的值应用 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>}

上面的代码将标签的默认样式设置为postCardTags（我已设置为蓝色），并将值为“新闻稿”的标签设置为红色。

当我在本地运行它时，localhost:8000/它正确地应用了样式，“新闻稿”标签被正确地设置为红色。当我推送到生产环境时，值为“新闻稿”的标签没有正确地将其 CSS 类设置tagStyles.red为蓝色。出于某种原因tagStyles.red，当项目在本地运行时设置为“新闻稿”标签，但当推送到生产环境时，“新闻稿”标签设置为蓝色（即styles.postCardTags）。

为什么我的“新闻稿”标签tagStyles.tagRed在打开时应用样式，但在推送到实时站点时localhost应用类？styles.postCardTags这是 Gatsby 如何构建组件的问题吗？

4

1 回答 1

0

我认为您不需要外部包（将捆绑增加项目的大小）来实现此行为。删除包可能会解决您的问题，因为它可能存在 SSR（服务器端渲染）问题。我用来根据一些参数（比如你的）或. 尝试：tagsprops

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>
}

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

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

正如我所说，您可以更改此行为以在其中添加 CSS 模块。

于 2020-11-25T06:46:59.690 回答