Closed Console32 closed 4 years ago
The Material UI Styles are applied to the wrong components on the 2nd render.
Clone the Repo here: https://github.com/Console32/BrokenCss run npm i && npm run build && npm run serve
npm i && npm run build && npm run serve
Styles are applied to the correct components
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:
After navigating to page A and back to TITLE the page works as expected:
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
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.
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
Header.js
A style from one button is applied to the Box around the Image:
After navigating to page A and back to TITLE the page works as expected:
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