css 在 Gatsby、MaterialUI 的生产中中断

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组件。该组件使用MediaQueryfromreact-responsive来实现在不同屏幕尺寸上隐藏内容。因此，SSR 从未渲染 LaptopAndWider 下面的 Material UI 组件，这导致样式丢失。CSR 确实发挥了作用，这就是为什么在应用了正确的样式之后。

MediaQuery将from替换react-responsive为Hiddenfrom@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>