簡介
- 為了測試建立一個
layout.js到/components/layout目錄下怖喻。 - 文件內(nèi)容：
export default function Layout({ children }) {
return <div>{children}</div>;
}
- 之后在 first-post.js 中添加并導(dǎo)入Layout組建，修改這個文件：
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout'; // 這里引入剛剛創(chuàng)建的 Layout 布局充蓝，這個布局只是講頁面直接放到了一個 div 中隧枫。
export default function FirstPost() {
return (
<Layout>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</Layout>
);
}
創(chuàng)建布局模塊的 layout.module.css 文件
- 創(chuàng)建到 /components/ 目錄下，添加如下CSS
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
- 重新修改 components/layout.js 文件：
import styles from './layout.module.css'; // 引入剛剛創(chuàng)建的CSS文件
export default function Layout({ children }) {
// 加載創(chuàng)建的container樣式
return <div className={styles.container}>{children}</div>;
}
-
刷新頁面看看樣式是否已經(jīng)加進來了
image.png
全局樣式 Global Styles
- 為了測試 global CSS 創(chuàng)建
pages/_app.js文件并填寫如下內(nèi)容：
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
- _app.js 是一個頂層React組件谓苟，可以用它保存全局狀態(tài)官脓，或者全局CSS。
- 添加全局樣式涝焙，創(chuàng)建
styles/global.css文件卑笨，并寫入如下樣式：(這會改變一些標(biāo)簽的展示形式)
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
line-height: 1.6;
font-size: 18px;
}
* {
box-sizing: border-box;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
display: block;
}
- 將這個全局的CSS導(dǎo)入到
pages/_app.js文件
// `pages/_app.js`
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
- 刷新頁面應(yīng)該可以看到變化了。
結(jié)束
- 接下來介紹通過
clsx library完成樣式 classes 的切換仑撞。
