Nextjs 中样式的 CSS 模块与样式化组件

样式是创建 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 模块，还是追求活力的样式化组件，您都能够为您的项目创建美观且可维护的样式。