样式是创建 next.js 应用程序的重要组成部分。
流行的选项包括 css 模块和样式组件。两者都有不同的优势和用例。
我们将深入研究这两种方法，比较它们的优点，并帮助确定哪种方法最适合该项目。
什么是 css 模块？
1.创建 css 模块文件： 创建一个扩展名为 .module.css. 的文件。
/* styles.module.css */
.container {
background-color: lightblue;
padding: 20px;
border-radius: 8px;
}
2.导入和使用样式： 在组件中导入 css 模块，然后使用 classname 属性应用这些样式。
// components/styledcomponent.js
meaning that one can import styles from './styles.module.css';
export default function styledcomponent() {
return <div classname={styles.container}>hello, css modules!</div>;
}
什么是样式组件？
它是 react 和 next.js 的库，能够在 javascript 中编写实际的 css。
立即学习“前端免费学习笔记（深入）”；
同样，该方法使用标记模板文字来设置组件的样式。
样式组件是动态的，这意味着您可以在其中传递道具并根据这些道具更改样式。
如何在 next.js 中使用样式化组件？
1.安装样式组件：
首先，安装库。
npm install styled-components
2.创建和使用样式组件：
导入样式函数并在其中定义样式组件。
// components/StyledComponent.js
import styled from 'styled-components';
const Container = styled.div`
background-color: lightblue;
padding: 20px;
border-radius: 8px;
`;
``
export default function StyledComponent() {
return <Container>Hello, Styled Components!</Container>;
}
比较 css 模块和样式组件
1.范围和隔离：
css 模块：通过防止全局命名空间的污染，它默认提供范围样式。
样式化组件：由于它们是组件定义的一部分，因此样式自然地作用于组件。
2.动态造型：
css 模块：静态，需要一些额外的逻辑来动态化样式。
样式组件：基于原生道具的动态样式。
3.学习曲线：
css 模块：对于了解传统 css 的每个人来说都很简单
样式组件：需要样式组件库和 javascript 模板文字的知识。
4.表现：
css 模块：运行时开销接近于零；它将样式评估为标准 css。
样式化组件：动态生成样式的运行时开销略高；不过，通常可以忽略不计。
5.开发者经验：
css 模块：对于喜欢将风格与逻辑分离的人来说很容易。
样式化组件：通过将样式与其组件共置来获得更好的开发体验。
您应该选择哪一个？
css 模块/样式与样式组件的选择主要取决于项目的特定需求和团队的偏好。
如果满足以下条件，请选择 css 模块：
你喜欢传统的css。
您想要简单性和低运行时开销。
您有一个庞大的项目，其中有许多熟悉 css 但不熟悉基于 javascript 的样式的开发人员。
如果满足以下条件，请选择样式组件：
您喜欢将样式与组件共置。
您想要拥有动态造型的可能性。
您想要一个具有最新 css 功能（如嵌套）的高级主题系统。
结论
我们研究了两种设计 next.js 应用程序的优秀方法，每种方法都有不同的优点。无论您是追求简单易用的 css 模块，还是追求活力的样式化组件，您都能够为您的项目创建美观且可维护的样式。
