Javascript MaterialUI makeStyles在NextJS中刷新时撤消自定义css

我在一个NextJS网站上工作，该网站有一些自定义样式，通过MaterialUI的makeStyles应用。它在第一次加载时工作正常，然后在第二次加载时撤消所有自定义工作。它似乎与路径有关，因为它唯一有效的时间是当我第一次被引导到页面本身时。它发生在两个不同的页面上，一个是通过

href='/login'

定向的，另一个是通过next/router

router.push（'/register'）

我假设这与接下来加载页面的方式有关？但我要说的是，根据右下角的图标，这两个页面都是预先呈现的页面

import React, {useState} from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { login } from '../store/user/action'
import { useRouter } from 'next/router'

import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';

const style = makeStyles({
    root: {
        marginBottom: '20px',
        textAlign: 'center'
    },
  });


function Signin({login}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    
    const router = useRouter();

    const clickRegister = (e) => {
        e.preventDefault();
        router.push('/register')
    }

    const classStyle = style();

    return (
        <div className='flex flex-column center m-20 w-750'>
            <h3 className='m-20'>Login</h3>
            <form className='flex flex-column w-750 center' onSubmit={e=>login(e, {email, password})} >
                <TextField
                    className={classStyle.root}
                    required
                    type='email'
                    id="email"
                    label="Email"
                    variant="outlined"
                    onChange={e=>setEmail(e.target.value)}
                />
                <TextField
                    className={classStyle.root}
                    required
                    type='password'
                    id="password"
                    label="Password"
                    variant="outlined"
                    onChange={e=>setPassword(e.target.value)}
                />
                
                <input 
                    type='submit'
                    className='purple-button mt-20 h-3' 
                    onClick={e=>login(e)}
                    value='Login' />
            </form>
            <p>Don't Have an account?</p>
            <form onSubmit='/register'>
                <input value='Register' type='submit' className='flex flex-column w-750 center purple-button h-3' onClick={e=>clickRegister(e)} />
            </form>

        </div>
    )
}



const mapStateToProps = (state) => ({
    email: state.user.email,
    token: state.user.token,
    isLoggedIn: state.user.isLoggedIn,
  })
  
const mapDispatchToProps = (dispatch) => {
    return {
        login: bindActionCreators(login, dispatch),
    }
}
  
export default connect(mapStateToProps, mapDispatchToProps)(Signin)

---

您需要在

pages/\u document.js

中对材质UI样式表进行额外设置，以支持SSR样式

如果您还没有自定义的

\u document.js

，请使用以下代码创建一个：

从“React”导入React；
从“next/Document”导入文档，{Html，Head，Main，NextScript}；
从“@material ui/core/styles”导入{ServerStyleSheets}”；
类MyDocument扩展了文档{
静态异步getInitialProps（ctx）{
const sheets=新服务器样式表（）；
const originalRenderPage=ctx.renderPage；
ctx.renderPage=（）=>
原始渲染图({
enhanceApp:（App）=>（道具）=>床单。收藏（.
非常感谢！我可以通过添加_document.js然后重新启动服务器来启动并运行它。我以前从未处理过SSR，我认为它是这样的。你是一个救生员！
"dependencies": {
    "@material-ui/core": "4.11.3",
    "axios": "0.21.1",
    "material-ui": "0.20.2",
    "next": "9.4.1",
    "next-redux-wrapper": "^6.0.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "7.1.3",
    "redux": "4.0.5",
    "redux-devtools-extension": "2.13.8",
    "redux-thunk": "2.3.0"
  },