当我使用 persist gate 时 Flex 方向发生变化（下一个带有 redux 的 js）

Question

我正在使用 next js 和 redux 构建应用程序。当我在 _app.js 中使用时，弹性方向在 index.js 中从行到列发生变化。 CSS 或 jsx 中没有任何变化。

_app.js:

import '../styles/globals.css';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import {store} from '../store';
import {Loading} from './_Loading';

function MyApp({ Component, pageProps }) {
  let persistor = persistStore(store);
  return(
    <PersistGate loading={null} persistor={persistor}>
      <Component {...pageProps} />
    </PersistGate>
  )
}

export default MyApp

index.js:

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
import IcecreamRoundedIcon from '@mui/icons-material/IcecreamRounded';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import CssBaseline from '@mui/material/CssBaseline';
import Image from 'next/image';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { IcecreamSharp } from '@mui/icons-material';
import { Divider } from '@mui/material';
import styles from "../styles/index.module.css";

function Copyright() {
  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://mysweetplace.ro">
        mysweetplace
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const cards = [1, 2, 3];

const theme = createTheme({
  palette:{
    primary:{
      //lighter pink
      //  "#E9AFA3",
      //darker pink
      main: "#FF5964",
      
    },
    secondary: {
      //lighter blue
      // "#99B2DD",
      //darker blue
      main: "#3A405A",
      
    }
  }
});

export default function Album() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppBar position="sticky" color="secondary">
        <Toolbar>
          <IcecreamSharp sx={{ mr: 2 }} color=""/>
          <Typography variant="h6" color="primary" noWrap>
            My sweet Place
          </Typography>
        </Toolbar>
      </AppBar>
      <main>
        {/* Hero unit */}
        <Box
          sx={{
            bgcolor: 'background.paper',
            pt: 8,
            pb: 6,
          }}
        >
          <Container maxWidth="sm">
            <Typography
              component="h2"
              variant="h3"
              align="center"
              color="secondary"
              gutterBottom
            ><span className={styles.dsText}>Discover. </span>
             Order. Rate.</Typography>

            <Typography variant="h5" align="center" color="text.secondary" paragraph>
              Discover and order from cafes, bakeries and all the sweets shops from all around Bucharest. Check out the reviews and ratings for all the new places!
            </Typography>
            <Stack
              sx={{ pt: 4 }}
              direction="row"
              spacing={2}
              justifyContent="center"
            >
              <Button variant="contained" href="/app/register">Go to app</Button>
              <Button variant="outlined">About us</Button>
            </Stack>
          </Container>
        </Box>
        <Divider className={styles.divider} />
        <Container className={styles.banner1}>
          <div className={styles.leftPart}>
            <Typography  variant="h4" color="secondary"  className={styles.containerTitle} gutterBottom>Over <span className={styles.dsText}>1.000</span> places to choose from</Typography>
            <Typography color="text.secondary" paragraph className={styles.paragInContainer}>
              On mysweetplace you can explore a vast range of cafes, bakeries and other sweets shops. Discover the most exquisite places you didn't even know existed.

            </Typography>
          </div>
          <div className={styles.rightPart}>
            <img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2047&q=80"
              height="300px" width="500px"
            />
          </div>
          
        </Container>
        <Divider className={styles.divider}/>
        <Container className={styles.banner2}>
          <div id={styles.banner2Left}>
            <img src="https://images.unsplash.com/photo-1570476922354-81227cdbb76c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80"
              height="300px" width="500px"
            />
          </div>
          <div id={styles.banner2Right}>
          <Typography  variant="h4" color="secondary"   gutterBottom className={styles.containerTitle}>Order Products <span className={styles.dsText}>Online</span></Typography>
            <Typography color="text.secondary" className={styles.paragInContainer} paragraph>
              You can order your desired products online on our platform and then pick them up from their shop, for convieniecy is key. 
            </Typography>
            <div className={styles.banner2Btn}>
              <Button variant="contained">Get started</Button>
            </div>
          </div>
        </Container>
      </main>
      {/* Footer */}
      <Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer" className={styles.footer}>
        <Divider/>
        <Typography variant="h6" align="center" color="secondary" gutterBottom>
          My sweet Place
        </Typography>
        <Typography
          variant="subtitle1"
          align="center"
          color="text.secondary"
          component="p"
        >
          Making your life sweeter everyday
        </Typography>
        <Copyright />
      </Box>
      {/* End footer */}
    </ThemeProvider>
  );
}

index.module.css:

/* Right and left part of the banner1 container */
.banner1{
  margin-top: 8vh;
  display: flex;
  flex-direction: row;
}
.banner2{
  margin-top: 6vh;
  display: flex;
  flex-direction: row;
}
.leftPart{
  align-self: flex-start;
  width: 50%;
  margin-top: 4vh;
}
.divider{
  margin-top: 6.5vh;
}

.rightPart{
  align-self: flex-end;
  width: 50%;
  
}
.rightPart img{
  margin-left: 10%;
  border-radius: 1.5em;
  border: 2.5px solid #3A405A;
}
.containerTitle{
  text-align:center;
}
.paragInContainer{
  text-align: center;
}
/* end of styling for banner1 container */

/* the discover in the title */
.dsText{
  color: #FF5964;
}

#banner2Left{
  align-self: flex-start;
  width: 50%;
}
#banner2Left img{
  margin-right: 10%;
  border-radius: 1.5em;
  border: 2.5px solid #3A405A;
}

#banner2Right{
  margin-top: 5%;
  width: 50%;
  align-self: flex-end;
}
.banner2Btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer{
  margin-top: 5%;
}

没有 Persistgate（之前）：

随着 persistgate flex 方向改变（之后）：

Answer 1

已解决：如果您遇到此问题，那是因为父 div 上的显示属性被覆盖，要解决此问题，请打开开发工具，检查元素 CSS，您会注意到显示属性被划掉了，这意味着它已被覆盖。 Return 到 CSS 并在 flex 之后添加 !important 标志，如下所示： display: flex !important;

当我使用 persist gate 时 Flex 方向发生变化（下一个带有 redux 的 js）

Flex direction changes when I use persist gate(next js with redux)

javascript

css

flexbox

redux

next.js