盖茨比、Material UI 制作中的 css 中断

Question

我有一个使用 MaterialUI 组件的 gatsby 网站。

不知何故，css 样式被应用于我网站的错误组件。我得到了与问题相关的以下代码。

布局.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> // 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 开发时，jss/css 按预期工作。但在生产中（gatsby build && gatsby serve），应用于导航栏项目（<Box height="70" alignItems="center" justifyContent="ce....）的 css 应用于围绕我的图像的框。这只是生产中发生的问题之一，只是为了展示问题。所有的风格都很奇怪，而且在产品中坏掉了。

导航栏项上的 CSS

在 gatsby-image 周围的 Div 上的 CSS（应该没有样式）

我尝试过的：

• 删除了gatsby-plugin-offline（这似乎会导致问题，反正atm不需要它）
• 重新排序各种页面上的组件
• 已删除 gatsby-plugin-emotion（无更改）
• 删除 .cache node_modules 和 package-lock.json 并重新安装软件包
• 更新了所有包
• 用 render 替换 rehydrate 函数（这确实破坏了更多东西）
• 阅读了一堆相关的 gitlab 问题，其中大多建议删除 gatsby-offline-plugin、清除缓存和更新包。

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

Answer 1

与 CSS 类名的冲突是由 multitree setup in your application 引起的。

您可以通过提供用于生成类的类名生成器来解决此冲突。这样 Gatsby 和 MDX 将使用相同的类名生成器来生成类名。

安装react-jss

yarn add react-jss

在src/components/Layout.js中，提供相同的类名生成器，

import React from 'react';
//...
import {createGenerateId, JssProvider} from 'react-jss';

const generateId = createGenerateId();

const Layout = ({children}) => {  
  //...
  return ( 
    <JssProvider generateId={generateId}>
      <ThemeProvider theme={theme}>
      {/* ... */}
      </ThemeProvider>
    </JssProvider>
  );
}

Answer 2

问题源于LaptopAndWider 组件。该组件使用react-responsive 中的MediaQuery 来实现在不同屏幕尺寸上隐藏内容。因此，SSR 从未在 LaptopAndWider 下方渲染 Material UI 组件，这导致样式缺失。 CSR 确实有效，这就是为什么在来回导航应用正确样式之后的原因。

用来自@material-ui/core 的Hidden 替换来自react-responsive 的MediaQuery 可以解决问题。

            <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>