I have a Gatsby site with MaterialUI Components, but I'm facing an issue with CSS styles being applied to the wrong components. The root of the problem seems to lie in the following code snippets:
Layout.js
<ThemeProvider theme={theme}>
<CssBaseline/>
<Header onMenu={() => setMenuOpen(true)}/>
{children}
</ThemeProvider
Header.js
const NavigationBar = ({onMenu}) => {
const trigger = useScrollTrigger({target: (typeof window !== `undefined` ? window : undefined)})
const data = useStaticQuery(query)
return (
<React.Fragment>
<Slide appear={false} direction="down" in={!trigger}>
<AppBar color={"primary"}>
<Toolbar disableGutters={true}>
...
<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"> // This styles (height, flexBox) gets applied to the wrong item
<Typography variant={"h6"}>
{x.title}
</Typography>
</Box>
</Button>
)}
{data.dataJson.navigationSecondary.map(x =>
<Button key={x.title} component={Link} to={x.path} color="inherit" underline={"none"}>
<Box height="70px" alignItems="center" justifyContent="center" display="flex">
<Typography variant={"body1"}>
{x.title}
</Typography>
</Box>
</Button>
)}
</LaptopAndWider>
...
</Toolbar>
</AppBar>
</Slide>
<Box height={82}/>
</React.Fragment>
);
}
Index.js
const IndexPage = ({data}) => (
<React.Fragment>
<Box>
<GatsbyImage fluid={data.file.childImageSharp.fluid}
/>
</Box>
...
</React.Fragment>
)
My Gatsby plugins may be causing this issue:
plugins: [
...
`gatsby-theme-material-ui`,
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-layout`,
options: {
component: require.resolve(`./src/components/Layout`),
},
}
],
While CSS works fine in development with 'gatsby develop', it breaks in production ('gatsby build' & 'gatsby serve'). The CSS meant for navigation bar items is applied to the Box surrounding my image, creating a messy look on the site.
I've tried various solutions such as removing 'gatsby-plugin-offline', reordering components, eliminating 'gatsby-plugin-emotion', cleaning caches, updating packages, and more, but the issue persists. It has been a source of frustration, especially in the production environment.
For a better understanding of the problem, you can check out a sample on GitHub: https://github.com/Console32/BrokenCss