使用 Next.js 完善 CSS 样式 - 约 333 字
完善 CSS 样式
到目前为止，我们只添加了最少的 React 和 CSS 代码来说明CSS Modules等概念。在继续学习有关数据获取的下一课之前，让我们完善页面样式和代码。
更新 components/layout.module.css
首先，打开 components/layout.module.css 并将其替换为以下布局：
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
}
.backToHome {
margin: 3rem 0 0;
}
创建 styles/utils.module.css
其次，让我们创建一组可以跨多个组件重复使用的 CSS 实用程序类（用于文本样式）。
添加一个名为 styles/utils.module.css 的 CSS 文件，并写入下面的新内容：
.heading2Xl {
font-size: 2.5rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingXl {
font-size: 2rem;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingLg {
font-size: 1.5rem;
line-height: 1.4;
margin: 1rem 0;
}
.headingMd {
font-size: 1.2rem;
line-height: 1.5;
}
.borderCircle {
border-radius: 9999px;
}
.colorInherit {
color: inherit;
}
.padding1px {
padding-top: 1px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
}
.listItem {
margin: 0 0 1.25rem;
}
.lightText {
color: #666;
}
您可以在整个应用程序中重复使用这些实用程序类，甚至可以在您的
global.css文件中使用实用程序类。实用类指的是一种编写 CSS 选择器的方法，而不是一种方法（例如全局样式、CSS 模块、Sass 等）。