I'm currently developing an app using next js and redux. An interesting issue has arisen - when I include PersistGate in my _app.js file, the flex direction mysteriously changes from row to column in index.js. There haven't been any modifications made to the CSS or JSX that could explain this behavior.
_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';
// rest of the code...
const cards = [1, 2, 3];
// Theme creation and export...
export default function Album() {
// Main component structure...
}
index.module.css:
/* Styling for banner containers, divider, titles, etc. */
.banner1{
// CSS properties for banner1 container
}
.banner2{
// CSS properties for banner2 container
}
.leftPart{
// Styles for left part of the banners
}
.rightPart{
// Styles for right part of the banners
}
// Additional styling classes for specific elements
Without Persistgate(before):
With persistgate flex direction changes(after):