大佬教程收集整理的这篇文章主要介绍了Next.js 刷新分页符 css classNames，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在迁移 React SPA，我对 Next.Js 非常陌生。我的问题是当我加载我的主页时它加载得很好但是当我刷新页面时它将错误的 classnames 分配给错误的组件。现在只发生在我的侧边栏组件上。
这是我的侧边栏组件代码
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;
你可以看到我控制台记录了 classnames，当我记录它们时它们是正确的，但是当我刷新时它们会改变。
这是我的侧边栏第一次加载时的样子 enter image description here enter image description here
这是刷新后的样子 enter image description here enter image description here
这是侧边栏的 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-@R_301_6823@: 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-@R_301_6823@: 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;
}
}
这里有 2 个可能性，
尝试在 next.config.js 中添加 css loader 如下
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
},})
以上是大佬教程为你收集整理的Next.js 刷新分页符 css classNames全部内容，希望文章能够帮你解决Next.js 刷新分页符 css classNames所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。