简介
- 为了测试建立一个
layout.js到/components/layout目录下。 - 文件内容：
export default function Layout({ children }) {
return <div>{children}</div>;
}
- 之后在 first-post.js 中添加并导入Layout组建，修改这个文件：
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout'; // 这里引入刚刚创建的 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>
);
}
创建布局模块的 layout.module.css 文件
- 创建到 /components/ 目录下，添加如下CSS
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
- 重新修改 components/layout.js 文件：
import styles from './layout.module.css'; // 引入刚刚创建的CSS文件
export default function Layout({ children }) {
// 加载创建的container样式
return <div className={styles.container}>{children}</div>;
}
-
刷新页面看看样式是否已经加进来了
image.png
全局样式 Global Styles
- 为了测试 global CSS 创建
pages/_app.js文件并填写如下内容：
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
- _app.js 是一个顶层React组件，可以用它保存全局状态，或者全局CSS。
- 添加全局样式，创建
styles/global.css文件，并写入如下样式：(这会改变一些标签的展示形式)
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导入到
pages/_app.js文件
// `pages/_app.js`
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
- 刷新页面应该可以看到变化了。
结束
- 接下来介绍通过
clsx library完成样式 classes 的切换。
