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

Question

I am using next js and redux to build an app. When I use in my _app.js the flex direction changes in index.js, from row to column. No changes in the CSS or in the jsx for that matter.

_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%;
}

Without Persistgate(before):

With persistgate flex direction changes(after):

Answer 1

SOLVED: If you encounter this issue it is because the display property on the parent div got overwritten, to solve this open the dev tools, inspect the elem CSS, you will notice the display property is crossed, meaning it has been overwritten. Return to the CSS and and add !important flag after the flex, like so : display: flex !important;