在next.js中使用redux-persist时,Scss样式会覆盖

slhcrj9b  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(89)

我有这样的代码:

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>
  )
}

字符串
当我添加到我的项目,我的scss文件停止工作。他们被一些其他的风格覆盖。当我在我的代码中注解一切都变得正常。我不知道什么是问题,我需要解决这个问题

bvn4nwqk

bvn4nwqk1#

解决方案是添加

<StyledEngineProvider injectFirst>

字符串
这样

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

相关问题