css หยุดการผลิต Gatsby, MaterialUI

Question

ฉันมีเว็บไซต์ gatsby ที่ใช้ส่วนประกอบ MaterialUI

อย่างไรก็ตามรูปแบบ 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>
  );
}

และดัชนีต่อไปนี้ 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) css ที่ใช้กับรายการแถบนำทาง ( <Box height="70" alignItems="center" justifyContent="ce....) จะถูกนำไปใช้กับ Box ซึ่งล้อมรอบรูปภาพของฉัน นี่เป็นเพียงหนึ่งในปัญหาที่เกิดขึ้นในการผลิตเพียงเพื่อแสดงปัญหา รูปแบบทั้งหมดแปลกและแตกในแยง

CSS บนรายการ NavigationBar

CSS บน Div รอบ ๆ gatsby-image (ซึ่งไม่ควรมีสไตล์)

สิ่งที่ฉันได้ลอง:

• ลบออกgatsby-plugin-offline(ดูเหมือนว่าจะทำให้เกิดปัญหาไม่จำเป็นต้องใช้ atm ต่อไป)
• จัดเรียงคอมโพเนนต์ใหม่ในทุกหน้า
• ลบออกgatsby-plugin-emotion(ไม่มีการเปลี่ยนแปลง)
• ลบออก.cache node_modulesและpackage-lock.jsonแพคเกจและติดตั้งใหม่
• อัปเดตแพ็คเกจทั้งหมด
• แทนที่ฟังก์ชัน rehydrate ด้วยการเรนเดอร์ (ซึ่งทำลายสิ่งต่างๆได้มากขึ้น)
• อ่านปัญหาเกี่ยวกับ gitlab ที่เกี่ยวข้องซึ่งส่วนใหญ่แนะนำให้ลบการgatsby-offline-pluginล้างแคชและอัปเดตแพ็คเกจ

ตัวอย่างที่แสดงปัญหามีอยู่ที่นี่: https://github.com/Console32/BrokenCss

Answer 1

ปัญหาเกิดจากLaptopAndWiderคอมโพเนนต์ ส่วนประกอบนี้ใช้MediaQueryจากreact-responsiveเพื่อใช้การซ่อนสิ่งต่างๆบนหน้าจอขนาดต่างๆ ดังนั้น SSR จึงไม่เคยแสดงองค์ประกอบ UI วัสดุด้านล่าง LaptopAndWider ซึ่งส่งผลให้รูปแบบขาดหายไป 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 นี้ classnames ผลจากการมีการติดตั้งนั้น ๆ ในใบสมัครของคุณ

คุณสามารถแก้ไขข้อขัดแย้งนี้ได้โดยจัดเตรียมตัวสร้างชื่อคลาสเพื่อสร้างคลาส วิธีนี้ 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>
  );
}