[英]How do I properly execute the path in nextjs css or scss?
當我創建 NextJS 項目時(我還在練習)。 它總是問我 5 件事
Typescript - 否 / 是 ESLint - 否 / 是 src / 目錄 - 否 / 是 app / 目錄(我忘了你創建一個時想象它) - 否 / 是導入 '@/' - 否 / 是
而且我總是輸入 Yes-Yes-No-No-Yes,因為我知道 typescript 和 ESLint,但我不知道該路徑如何與 CSS 一起使用。
所以文件夾是這樣創建的
-頁面
-民眾
-樣式
所以基本上我在pages/_app.tsx
中有這個
import 'bootstrap/dist/css/bootstrap.min.css'
import '@/styles/globals.css'
然后在我的 styles 中有兩個 css 是 navbar.module.css 和 global.module.css
但問題是我可以像命名模塊 css 一樣將它傳遞給className
嗎?
所以這是在我的navbar.module.css
.navbar_header {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 50px;
}
.navbar_parent {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 10px;
background: rgba(255, 230, 0, 0.46);
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.39);
border-radius: 30px;
}
.links {
padding: 5px;
background: linear-gradient(180deg, #FFC27B 0%, #FFE91F 85.42%);
border-radius: 15px;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
在 pages/navbar.tsx 部分,我將navbar.module.css
傳遞到那里
import Link from 'next/link'
import React from 'react'
import styles from '@/styles/navbar.module.css'
const Navbar = () => {
return (
<div className={styles.navbar_header}>
<div className={styles.navbar_parent}>
<Link className={styles.links} href={'/'}>
<h5>
Home
</h5>
</Link>
<Link className={styles.links} href={'/authentication/auth'}>
<h5>
Sign Up / Log In
</h5>
</Link>
</div>
</div>
)
}
export default Navbar
同樣在我的 pages/index.tsx 中我有這段代碼
import Head from 'next/head';
import Navbar from './navbar';
export default function Home() {
return (
<>
<Head>
<link rel="icon" href="/p5.png" />
<title> Next.JS Designing </title>
</Head>
<body>
<Navbar/>
</body>
</>
)
}
我總是得到這個東西。 網站前面的錯誤。
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
我想念這里有什么問題嗎?
Nvm 錯誤來自<body></body>
是在index.tsx
的<Navbar/>
中創建的 hahahaha
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.