gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.26k stars 10.3k forks source link

Material UI Styles are broken in Production. #26991

Closed Console32 closed 4 years ago

Console32 commented 4 years ago

Description

The Material UI Styles are applied to the wrong components on the 2nd render.

Steps to reproduce

Clone the Repo here: https://github.com/Console32/BrokenCss run npm i && npm run build && npm run serve

Expected result

Styles are applied to the correct components

Actual result

index.js

  <React.Fragment>
    <Box>
      <GatsbyImage fluid={data.file.childImageSharp.fluid}
                   />
    </Box>

Header.js

....
    <LaptopAndWider>
              {data.dataJson.navigationPrimary.map(x =>
                <Button key={x.title} component={Link} to={x.path} color="inherit" underline={"none"}>
                  <Box height="70" alignItems="center" justifyContent="center" display="flex">
                    <Typography variant={"h6"}>
                      {x.title}
                    </Typography>
                  </Box>
                </Button>
              )}
....

A style from one button is applied to the Box around the Image: Screenshot 2020-09-22 at 12 40 53

After navigating to page A and back to TITLE the page works as expected:

Screenshot 2020-09-22 at 12 57 01

Environment

System: OS: macOS 10.15.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v14.8.0/bin/npm Languages: Python: 3.8.5 - /usr/local/bin/python Browsers: Safari: 14.0 npmPackages: gatsby: ^2.24.63 => 2.24.63 gatsby-image: ^2.4.19 => 2.4.19 gatsby-plugin-emotion: ^4.3.11 => 4.3.11 gatsby-plugin-layout: ^1.3.11 => 1.3.11 gatsby-plugin-mdx: ^1.2.40 => 1.2.40 gatsby-plugin-react-helmet: ^3.3.11 => 3.3.11 gatsby-plugin-robots-txt: ^1.5.2 => 1.5.2 gatsby-plugin-sharp: ^2.6.36 => 2.6.36 gatsby-plugin-sitemap: ^2.4.13 => 2.4.13 gatsby-remark-images: ^3.3.30 => 3.3.30 gatsby-source-filesystem: ^2.3.30 => 2.3.30 gatsby-theme-material-ui: ^1.0.13 => 1.0.13 gatsby-theme-material-ui-top-layout: ^1.0.3 => 1.0.3 gatsby-transformer-json: ^2.4.12 => 2.4.12 gatsby-transformer-remark: ^2.8.35 => 2.8.35 gatsby-transformer-sharp: ^2.5.15 => 2.5.15

ascorbic commented 4 years ago

Hi. Thanks for the report. This looks like it's an issue related to a community theme. Could you file this against the gatsby-theme-material-ui repo please.