Question

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

以某种方式将CSS样式应用于我的网站的错误组件。我得到了与该问题有关的以下代码。

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> // 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服务）中，应用于导航栏项（<Box height="70" alignItems="center" justifyContent="ce....）的css应用于包围我的Image的Box。这只是生产中发生的问题之一，只是为了说明问题。所有样式在生产中都是奇怪的。

NavigationBar项上的CSS

div上gatsby-image周围的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

问题源自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>

Answer 2

与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>
  );
}

Gatsby和MaterialUI生产中的CSS中断

2 个答案: