css 在 Gatsby、Material UI 的生产中中断

Question

我有一个使用 MaterialUI 组件的 gatsby 网站。
css 样式以某种方式应用于我网站的错误组件。我得到了与问题相关的以下代码。
布局.js

    <ThemeProvider theme={theme}>
      <CssBaseline/>
      <Header onMenu={() => setMenuOpen(true)}/>
      {children}
    </ThemeProvider

头文件.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> // Gets applied to this Box
      <GatsbyImage fluid={data.file.childImageSharp.fluid}
                   />
    </Box>
    ...
  </React.Fragment>
)

我在 gatsby 中使用了以下可能相关的插件:

  plugins: [
    ...
    `gatsby-theme-material-ui`,
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-layout`,
      options: {
        component: require.resolve(`./src/components/Layout`),
      },
    }
  ],

当我使用 gatsby develop 时，jss/css 按预期工作。但是在生产(gatsby build && gatsby serve)中，应用于导航栏元素( <Box height="70" alignItems="center" justifyContent="ce.... )的 css 应用于围绕我的图像的框。这只是生产中发生的问题之一，只是为了说明问题。所有的款式都很奇怪，而且在生产过程中很糟糕。
NavigationBar 项上的 CSS

gatsby-image 周围 Div 上的 CSS(应该没有样式)

我尝试过的:

已删除 gatsby-plugin-offline (这似乎会导致问题，无论如何都不需要它)

各类页面重新排序组件

已删除 gatsby-plugin-emotion (无变化)

已删除 .cache node_modules和 package-lock.json和重新安装的软件包

更新所有软件包

用渲染替换补水功能(它确实破坏了更多的东西)

阅读一堆相关的 gitlab 问题，其中大部分建议删除 gatsby-offline-plugin ，清除缓存和更新包。

此处提供了显示问题的示例: https://github.com/Console32/BrokenCss

Answer 1

问题源于LaptopAndWider成分。该组件使用 MediaQuery来自 react-responsive在不同的屏幕尺寸上实现隐藏的东西。因此，SSR 从未在 LaptopAndWider 下方渲染 Material UI 组件，从而导致样式丢失。 CSR 确实有效，这就是在来回导航应用的正确样式后的原因。
更换 MediaQuery来自 react-responsive与 Hidden来自 @material-ui/core解决了这个问题。

            <Hidden mdDown>
              {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>
              )}
            </Hidden>