reactjs - Gatsby - 页面刷新损坏

Question

我的 gatsby 网站上的一个页面出现问题。

如果我从任何其他页面转到该页面，那么它会呈现良好的效果。但是，如果我直接点击链接，或者在加载后刷新页面，那么它就无法正确呈现。所有其他页面都呈现良好。与此不同的一件事是使用 Flex 显示布局。

查看页面结构，它的呈现方式有所不同。 HTML 看起来几乎一样，但是 gatsy 设置的类和类属性不同。

这是有问题的页面:https://www.hazardousfrog.com/contact-us/

如果有人可以快速浏览一下并让我知道这是 Gatsby 问题还是我做错了什么，我将非常感激。

Answer 1

看了之后我相信这可能是你的错误。我在不同的选项卡中查看两个页面，其中一个正确呈现，而另一个则不正确。使用开发人员工具，我检查了表单组件，发现它们正在加载完全不同的样式。我无法告诉您到底是什么导致了这种情况，但如果我不得不猜测，可能是您的样式或类相互覆盖。

    //the form style when it is NOT rendered correctly
    .jss9 {
        margin: 0;
        border: 0;
        display: inline-flex;
        padding: 0;
        position: relative;
        min-width: 0;
        flex-direction: column;
        vertical-align: top;
    }

    //form styles when it IS rendered correctly
    .jss357 {
        display: flex;
        flex-wrap: wrap;
    }