Gatsby - page refresh corruption

问题

I have a problem with one page on my gatsby site.

If I go to that page from any other then it renders fine. But if I follow a link directly to it, or refresh the page once loaded then it does not render correctly. All of the other pages render fine. The one thing different about this is the use of flex display layout.

Looking at the page structure, it's rendered differently. HTML looks pretty much the same, but the classes and class attributes set by gatsy are different.

This is the page in question: https://www.hazardousfrog.com/contact-us/

If someone could take a quick look and let me know if this is a gatsby issue or something I have done wrong, I'd very much appreciate it.

回答1:

After looking at it I believe it may be an error on your end. I look at both pages in separate tabs, one rendered correctly and one not. With the developer tools I inspected the form components and saw that they were loading completely different styles. I wouldn't be able to tell you exactly what is causing this, but if I had to guess it could be that you have styles or classes that are overriding one another.

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

来源：https://stackoverflow.com/questions/60118186/gatsby-page-refresh-corruption