在 Next JS 中，Material UI makeStyles 在刷新时撤消自定义 css

Posted 2023-03-06

【中文标题】在 Next JS 中，Material UI makeStyles 在刷新时撤消自定义 css

【英文标题】：MaterialUI makeStyles undoes custom css upon refresh in NextJS

【发布时间】：2021-05-11 07:56:27

【问题描述】：

我正在开发一个 NextJS 站点，该站点具有一些通过 MaterialUI 的 makeStyles 应用的自定义样式。它在第一次加载时工作正常，然后在第二次撤消所有自定义工作。似乎它与路由有关，因为它唯一起作用的时间是当我第一次被定向到页面本身时。它发生在 2 个不同的页面上，一个是通过 href='/login' 引导的，另一个是通过 next/router router.push('/register') 引导的

我假设这与 Next 加载页面的方式有关？但是根据右下角的图标，我会说这两个都是prerendered pages。

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)

"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"
  ,

【参考方案1】：

您需要对 pages/_document.js 中的 Material-UI 样式表进行额外设置，以支持 s-s-r 样式。

如果您还没有自定义_document.js，请使用以下代码创建一个：

import React from "react";
import Document,  html, Head, Main, NextScript  from "next/document";
import  ServerStyleSheets  from "@material-ui/core/styles";

class MyDocument extends Document 
  static async getInitialProps(ctx) 
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage(
        enhanceApp: (App) => (props) => sheets.collect(<App ...props />)
      );

    const initialProps = await Document.getInitialProps(ctx);

    return 
      ...initialProps,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: [
        ...React.Children.toArray(initialProps.styles),
        sheets.getStyleElement()
      ]
    ;
  

  render() 
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  


export default MyDocument;

然后，您可以删除自定义 _app.js 中的服务器端注入样式。

useEffect(() => 
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) 
        jssStyles.parentElement.removeChild(jssStyles);
    
, []);

---

更多详情请查看Material-UI official documentation。

【讨论】：

非常感谢！只需添加 _document.js 然后重新启动服务器，我就能启动并运行它。我以前没有处理过s-s-r，并认为它是这样的。你是救命稻草！

你是救世主！谢谢。