css interrompt la production de Gatsby, MaterialUI

Question

J'ai un site Web Gatsby qui utilise des composants MaterialUI.

D'une manière ou d'une autre, les styles css sont appliqués aux mauvais composants de mon site Web. J'ai reçu le code suivant lié au problème.

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

Et l'index.js suivant

const IndexPage = ({data}) => (
  <React.Fragment>
    <Box> // Gets applied to this Box
      <GatsbyImage fluid={data.file.childImageSharp.fluid}
                   />
    </Box>
    ...
  </React.Fragment>
)

J'utilise les plugins suivants dans gatsby qui pourraient être liés:

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

Quand j'utilise gatsby develop, le jss / css fonctionne comme prévu. Mais en production (gatsby build && gatsby serve), le css qui est appliqué aux éléments de la barre de navigation ( <Box height="70" alignItems="center" justifyContent="ce....) est appliqué à la boîte qui entoure mon image. Ce n'est qu'un des problèmes qui surviennent en production, juste pour montrer le problème. Tous les styles sont bizarres et cassés dans la production.

CSS sur l'élément NavigationBar

CSS sur la Div autour de l'image gatsby (qui ne devrait avoir aucun style)

Ce que j'ai essayé:

• Supprimé gatsby-plugin-offline(cela semble causer des problèmes, vous n'en avez pas besoin de toute façon)
• Réorganiser les composants sur toutes sortes de pages
• Supprimé gatsby-plugin-emotion(aucun changement)
• Removed .cache node_moduleset package-lock.jsonpaquets et réinstallées
• Mise à jour de tous les packages
• Remplacez la fonction de réhydratation par render (qui a cassé encore plus de choses)
• Lisez un tas de problèmes liés à gitlab, qui suggèrent principalement de supprimer gatsby-offline-plugin, de vider les caches et de mettre à jour les packages.

Un exemple illustrant le problème est disponible ici: https://github.com/Console32/BrokenCss

Answer 1

Le problème vient du LaptopAndWidercomposant. Ce composant utilise MediaQueryde react-responsivepour mettre en œuvre le masquage des éléments sur différentes tailles d'écran. Le SSR n'a donc jamais rendu les composants de l'interface matérielle sous LaptopAndWider, ce qui a entraîné des styles manquants. La RSE a fonctionné, c'est pourquoi après avoir navigué dans les deux sens, les styles corrects étaient appliqués.

Le remplacement MediaQueryde react-responsivepar Hiddende @material-ui/corerésout le problème.

            <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

Ce conflit avec les noms de classe CSS résulte de la configuration multitree dans votre application .

Vous pouvez résoudre ce conflit en fournissant un générateur de nom de classe pour générer les classes. De cette façon, Gatsby et MDX utiliseront le même générateur de nom de classe pour générer des noms de classe.

Installer react-jss

yarn add react-jss

Dans src/components/Layout.js, fournissez le même générateur de nom de classe,

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