next js 顺风 - CSS (1)

📌 相关文章

📜 next js 顺风 - CSS (1)

📅 最后修改于: 2023-12-03 15:33:06.461000 🧑 作者: Mango

Next.js 顺风 - CSS

Next.js 是一个流行的服务器端渲染框架，在快速构建现代 Web 应用程序方面表现出色。除了内置 React 和 Node.js 的强大功能外，Next.js 还提供了一些用于处理 CSS 的内置功能。在本文中，我们将深入了解 Next.js 的 CSS 功能，并讨论如何最大限度地利用它们。

CSS Module

Next.js 内置支持 CSS Module，它是一种模块化 CSS 方式，可以方便的针对组件分别定义样式并导出。

在 Next.js 中使用 CSS Module 非常简单，只需要在 CSS 文件中添加 .module 即可。例如：

/* styles.module.css */

.heading {
  color: blue;
}

.description {
  font-size: 14px;
}

然后，在组件中使用该 CSS 需要像这样导入：

import styles from './styles.module.css'

function MyComponent() {
  return (
    <div className={styles.heading}>
      <h1>My Title</h1>
      <p className={styles.description}>My description</p>
    </div>
  )
}

export default MyComponent

当您在 Next.js 中导入 CSS 文件时，它将自动启用 CSS Module，并将样式分配给变量。

注意：如果您使用了 style jsx，请不要使用 .module 。因为 Next.js 将无法正确解析。

CSS-in-JS

Next.js 还支持在 JavaScript 文件中使用 CSS-in-JS。这种方式将 CSS 和 JavaScript 结合在一起，允许您以编程方式动态生成样式。

在 Next.js 中使用 CSS-in-JS 非常简单，只需安装任何 CSS-in-JS 库（比如 styled-components），然后像在任何 React 应用程序中一样使用它们即可。

import styled from 'styled-components'

const Title = styled.h1`
  color: red;
  font-size: 24px;
`

function MyComponent() {
  return <Title>My Title</Title>
}

export default MyComponent

Global CSS

除了 CSS Module 和 CSS-in-JS，Next.js 还支持在全局范围内使用 CSS 样式。任何文件夹下的 styles/globals.css 文件都可以在整个应用程序中使用。

/* styles/globals.css */

body {
  font-family: 'Open Sans', sans-serif;
}

a {
  color: blue;
  text-decoration: none;
}

然后，在您的 _app.js 文件中，只需将样式文件导入即可：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

这样，您应用程序中的任何组件都可以使用全局样式。

Conclusion

在本文中，我们讨论了 Next.js 中的主要 CSS 功能，包括 CSS Module、CSS-in-JS 和全局样式。这些功能可以使您更轻松地管理样式，使您的应用程序更易于维护。我们希望您喜欢学习这些功能，感谢您的阅读！

Markdown Code Block:

# Next.js 顺风 - CSS

Next.js 是一个流行的服务器端渲染框架，在快速构建现代 Web 应用程序方面表现出色。除了内置 React 和 Node.js 的强大功能外，Next.js 还提供了一些用于处理 CSS 的内置功能。在本文中，我们将深入了解 Next.js 的 CSS 功能，并讨论如何最大限度地利用它们。

## CSS Module

Next.js 内置支持 CSS Module，它是一种模块化 CSS 方式，可以方便的针对组件分别定义样式并导出。

在 Next.js 中使用 CSS Module 非常简单，只需要在 CSS 文件中添加 `.module` 即可。例如：

```css
/* styles.module.css */

.heading {
  color: blue;
}

.description {
  font-size: 14px;
}