Next.js刷新分页符css classNames

Question

我正在迁移React SPA，我是非常新的Next.js。我的问题是，当我加载我的主页，它加载良好，但当我刷新页面，它分配错误的类名给错误的组件。现在只发生在我的侧边栏组件。

这是我的侧边栏组件代码

import React, { useContext } from "react";
import { AuthContext } from "../../../contexts/AuthContext";
import Avatar from "../Avatar";
import ArrowIcon from "../../../assets/icons/arrow.svg";
import HomeIcon from "../../../assets/icons/home-run.svg";
import ChatIcon from "../../../assets/icons/comment.svg";
import RocketIcon from "../../../assets/icons/start-button.svg";
import SchoolIcon from "../../../assets/icons/school.svg";
import QuestionIcon from "../../../assets/icons/question.svg";
import LoveIcon from "../../../assets/icons/love.svg";
import WorkIcon from "../../../assets/icons/work.svg";
import SettingsIcon from "../../../assets/icons/settings.svg";
import SearchBar from "../SearchBar";
import {useRouter} from 'next/router'
import styles from "./index.module.css";
function SideBar({ setMenuOpen, className, ...props }) {
const router = useRouter()
const { currentUser } = useContext(AuthContext);

const goTo = (link) => {
router.push(link);
if (setMenuOpen) {
setMenuOpen(false);
}
};
const avatar = styles['avatar']
console.log(styles['avatar']);
console.log(avatar);
return (
<div className={className}>
<ArrowIcon className={styles["close-button"]}
alt="close"
onClick={() => {
setMenuOpen(false);
}}/>

{currentUser && (
<>
<Avatar
width="100px"
className={"SideBar_avatar__u-NXU"}
image={
currentUser.get("profilePicture") &&
currentUser.get("profilePicture").url()
}
/>
<span className={styles.username}>
@{currentUser.attributes.username}
</span>
</>
)}
{console.log(styles.searchbar)}
<SearchBar className={styles['searchbar']} />
<ul className={styles.menu}>
<li
onClick={() => {
goTo("/home");
}}
>
<HomeIcon alt="option" className={styles["menu-icon"]}/>
{/* <img  src={homeIcon} /> */}
<span>Feed</span>
</li>
<li>
<RocketIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={rocketIcon} /> */}
<span>Descubre</span>
</li>
<li>
<ChatIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={chatIcon} /> */}
<span>Chat Global</span>
</li>
<li
onClick={() => {
goTo("/schools");
}}
>
<SchoolIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={schoolIcon} /> */}
<span>Escuelas</span>
</li>
<li
onClick={() => {
goTo("/question/");
}}
>
<QuestionIcon alt="option" className={styles["menu-icon"]}/>
{/* <img
alt="option"
className={styles["menu-icon"]}
src={questionIcon}
/> */}
<span>Pregunta</span>
</li>
<li
onClick={() => {
goTo("/unicrush/");
}}
>
<LoveIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={loveIcon} /> */}
<span>UniCrush</span>
</li>
<li
onClick={() => {
goTo("/job/");
}}
>
<WorkIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={workIcon} /> */}
<span>Trabajos</span>
</li>
</ul>
<div className={styles.footer}>
<div
className={styles["settingsOption"]}
onClick={() => {
goTo("/settings");
}}
>
<SettingsIcon alt="option" className={styles["menu-icon"]}/>
{/* <img
alt="option"
className={styles["menu-icon"]}
src={settingsIcon}
/> */}
<span>Adjustes</span>
</div>
<span>Contactanos!</span>
</div>
</div>
);
}
SideBar.defaultProps = {
className: styles.container,
};
export default SideBar;

你可以看到我控制台记录classname，当我记录它们时它们是正确的，但是当我刷新时它们会改变。

这是我的侧边栏第一次加载时的样子在这里输入图像描述输入图片描述

这是刷新后的样子在这里输入图像描述输入图片描述

这是侧边栏的CSS，我使用的是CSS模块。

.container {
display: flex;
flex-direction: column;
background: #fff;
position: absolute;
height: 100vh;
top: 0;
width: 200px;
box-shadow: 2px 0 5px 1px #a9a6a64d;
}
.close-button {
display: none;
}
.avatar {
margin: auto;
margin-top: 10px;
}
.username {
text-align: center;
font-size: large;
color: #5d5d5d;
}
.menu {
list-style: none;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.menu-icon {
width: 20px;
height: 20px;
}
.menu li {
display: flex;
padding: 10px 15px;
}
.menu li span {
margin-left: 10px;
font-size: 20px;
}
.searchbar {
display: none;
}
.footer {
margin: 10px 0px;
display: flex;
width: 100%;
justify-content: space-around;
}
.settingsOption {
display: flex;
}
.settingsOption span {
margin-left: 3px;
}
/* Device = Most of the Smartphones Mobiles (Portrait) and Low Resolution tablets
Screen = B/w 320px to 767px
*/
@media (max-width: 768px) {
.container {
width: 100%;
overflow: scroll;
align-items: center;
z-index: 2;
position: fixed;
}
.searchbar {
display: flex;
margin: 15px 0px;
}
.close-button {
align-self: end;
display: flex;
width: 25px;
margin: 10px;
}
.menu {
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
}
}

Answer 1

这里的可能性

1. 加载器

尝试在next.config.js中添加css加载器，如下所示

const withImages = require('next-images')
module.exports = withImages({
target: 'serverless',
webpack: function (config, { webpack }) {
config.module.rules.push({
test: /.(eot|svg|gif|md)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
config.plugins.push(new webpack.DefinePlugin({
'process.env': {
ENV: JSON.stringify(process.env.ENV),
}
}))
return config
},

})

2. 使用(_document.js)检查样式组件。https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68