Scss styles overrides when using redux-persist in next.js

i have code like this:

import '../styles/globals.scss'
import '../styles/material.scss'
import '../../public/css/mapbox-gl.css';
import {Provider } from 'react-redux'
import type { AppProps } from 'next/app'
import "../@types/@mui/mui.d.ts"

import store from '../store/store'
import { Layout } from '../components'
import ComponentWrapper from "../components/common/ComponentWrapper";
import {createTheme, ThemeProvider} from "@mui/material";
import {PersistGate} from "redux-persist/integration/react"
import {persistStore} from "redux-persist"

export default function MyApp({ Component, pageProps }: AppProps) {
//TODO implement own typography variants
    const theme = createTheme({
        typography: {
            h5: {
                fontSize: 22,
                fontWeight: 800,
            } ,
            subtitle2: {
                fontWeight: 600,
            }
        },
        components: {
            MuiButtonBase: {
                defaultProps: {
                    disableRipple: true,
                },
            },
            MuiPaper: {
                defaultProps: {
                    elevation:0,
                },
            }
        }
    });
    let persistor = persistStore(store)
  return (
    <Provider store={store}>
        <PersistGate persistor={persistor}>
            <ThemeProvider theme={theme}>
              <Layout>
                  <ComponentWrapper>
                    <Component {...pageProps} />
                  </ComponentWrapper>
              </Layout>
            </ThemeProvider>
        </PersistGate>
    </Provider>
  )
}

and when i adding to my project, my scss files stop working. They are overrided by some another styles. When i comment in my code everything becomes normal. I dont know whats the problem i need to fix this

The solution is adding

<StyledEngineProvider injectFirst>

like this

<PersistGate persistor={persistor}>
        <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>