[英]MaterialUI makeStyles undoes custom css upon refresh in NextJS
我正在開發一個 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"
},
您需要額外設置pages/_document.js
中的 Material-UI 樣式表以支持 SSR 樣式。
如果您還沒有自定義_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;
有關詳細信息,請查看Material-UI 官方文檔。
將這些屬性添加到next.config.js
文件中:
const nextConfig = {
reactStrictMode: true,
lib: ['es6', 'dom'],
noImplicitAny: true,
noImplicitThis: true,
strictNullChecks: true,
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.