Gatsby, MaterialUI üretiminde css kırılmaları

Question

MaterialUI Bileşenlerini kullanan bir gatsby web sitem var.

Bir şekilde css stilleri web sitemin yanlış bileşenlerine uygulanıyor. Sorunla ilgili aşağıdaki kodu aldım.

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

Ve aşağıdaki index.js

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

Gatsby'de ilişkili olabilecek aşağıdaki eklentileri kullanıyorum:

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

Gatsby development'ı kullandığımda, jss / css beklendiği gibi çalışıyor. Ancak Üretimde (gatsby build && gatsby hizmet) gezinti çubuğu öğelerine ( <Box height="70" alignItems="center" justifyContent="ce....) uygulanan css, Resmimi çevreleyen Kutuya uygulanır. Bu, sadece Problemi göstermek için üretimde meydana gelen Problemlerden sadece bir tanesidir. Tüm stiller tuhaf ve üretimde bozuk.

NavigationBar Öğesinde CSS

Gatsby görüntüsünün etrafındaki Div'de CSS (stil içermemelidir)

Ne denedim:

• Kaldırıldı gatsby-plugin-offline(Sorunlara neden oluyor gibi görünüyor, yine de atm'ye gerek yok)
• Her tür sayfada yeniden sıralanan bileşenler
• Kaldırıldı gatsby-plugin-emotion(değişiklik yok)
• Kaldırılmış .cache node_modulesve package-lock.jsonyeniden yüklenmiş paketler
• Tüm paketler güncellendi
• Rehidrat işlevini render ile değiştirin (bu daha da fazla şeyi bozdu)
• Çoğunlukla gatsby-offline-pluginönbelleklerin kaldırılmasını, önbelleklerin temizlenmesini ve paketlerin güncellenmesini öneren bir dizi ilgili gitlab sorununu okuyun .

Sorunu gösteren bir örnek burada mevcuttur: https://github.com/Console32/BrokenCss

Answer 1

Sorun LaptopAndWiderbileşenden kaynaklanıyor . Bu bileşen , farklı ekran boyutlarında şeyleri gizlemek için MediaQueryfrom kullanır react-responsive. Bu nedenle SSR, Materyal UI Bileşenlerini LaptopAndWider'ın altında oluşturmadı ve bu da stillerin eksik olmasına neden oldu. CSR işe yaradı, bu yüzden uygulandığında doğru stillere gidip geldikten sonra.

Yerine MediaQuerygelen react-responsiveile Hiddengelen @material-ui/coresorun çözer.

            <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 sınıf adlarıyla olan bu çakışma, uygulamanızda çoklu ağaç kurulumunun olmasından kaynaklanır .

Bu çakışmayı, sınıfları oluşturmak için bir sınıf adı oluşturucu sağlayarak çözebilirsiniz. Bu şekilde Gatsby ve MDX, sınıf adları oluşturmak için aynı sınıf adı üretecini kullanacaktır.

Yüklemek react-jss

yarn add react-jss

İçinde src/components/Layout.js, aynı sınıf adı oluşturucuyu sağlayın,

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