编辑“︁Next.js样式基础”︁（章节）

= Next.js样式基础 =

== 介绍 ==
Next.js提供了多种方式来处理样式，包括全局CSS、CSS模块、CSS-in-JS（如styled-components或emotion）以及内联样式。本章将详细介绍这些方法，帮助初学者和高级用户理解如何在Next.js项目中有效地应用样式。

== 全局CSS ==
全局CSS是最简单的样式方法，适用于整个应用程序。在Next.js中，全局CSS文件通常位于`styles`文件夹中，并在`_app.js`文件中导入。

=== 示例 ===
<syntaxhighlight lang="css">
/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// pages/_app.js
import '../styles/globals.css';

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

export default MyApp;
</syntaxhighlight>

=== 解释 ===
* 全局CSS会应用于整个应用程序，包括所有页面和组件。
* 在`_app.js`中导入全局CSS文件，确保样式在所有页面中生效。

== CSS模块 ==
CSS模块是一种将CSS局部化的方法，避免全局样式冲突。Next.js内置支持CSS模块，文件名需以`.module.css`结尾。

=== 示例 ===
<syntaxhighlight lang="css">
/* styles/Button.module.css */
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// components/Button.js
import styles from '../styles/Button.module.css';

export default function Button() {
  return <button className={styles.button}>Click Me</button>;
}
</syntaxhighlight>

=== 解释 ===
* CSS模块通过生成唯一的类名来避免样式冲突。
* 类名通过`styles`对象访问，如`styles.button`。

== CSS-in-JS ==
CSS-in-JS是一种将CSS直接写入JavaScript的方法，Next.js支持多种CSS-in-JS库，如styled-components和emotion。

=== 示例（styled-components） ===
<syntaxhighlight lang="javascript">
// components/Button.js
import styled from 'styled-components';

const StyledButton = styled.button`
  background: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

export default function Button() {
  return <StyledButton>Click Me</StyledButton>;
}
</syntaxhighlight>

=== 解释 ===
* CSS-in-JS允许动态样式和主题支持。
* 样式与组件紧密耦合，便于维护。

== 内联样式 ==
内联样式直接通过JavaScript对象的`style`属性应用。

=== 示例 ===
<syntaxhighlight lang="javascript">
// components/Button.js
export default function Button() {
  return (
    <button
      style={{
        background: 'blue',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
      }}
    >
      Click Me
    </button>
  );
}
</syntaxhighlight>

=== 解释 ===
* 内联样式适用于动态样式或简单样式。
* 不推荐用于复杂样式，因为难以维护。

== 实际案例 ==
以下是一个实际应用场景，展示如何在Next.js中使用CSS模块和CSS-in-JS。

=== 场景：主题切换 ===
使用CSS-in-JS（如styled-components）实现主题切换功能。

<syntaxhighlight lang="javascript">
// components/ThemeToggle.js
import styled, { ThemeProvider } from 'styled-components';
import { useState } from 'react';

const lightTheme = {
  background: '#fff',
  text: '#000',
};

const darkTheme = {
  background: '#000',
  text: '#fff',
};

const StyledButton = styled.button`
  background: ${(props) => props.theme.background};
  color: ${(props) => props.theme.text};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

export default function ThemeToggle() {
  const [theme, setTheme] = useState(lightTheme);

  const toggleTheme = () => {
    setTheme(theme === lightTheme ? darkTheme : lightTheme);
  };

  return (
    <ThemeProvider theme={theme}>
      <StyledButton onClick={toggleTheme}>Toggle Theme</StyledButton>
    </ThemeProvider>
  );
}
</syntaxhighlight>

=== 解释 ===
* 使用`ThemeProvider`和`styled-components`实现动态主题切换。
* 主题状态通过React的`useState`管理。

== 比较 ==
以下是不同样式方法的比较：

<mermaid>
pie
    title Next.js样式方法比较
    "全局CSS" : 20
    "CSS模块" : 30
    "CSS-in-JS" : 40
    "内联样式" : 10
</mermaid>

* **全局CSS**：简单但容易冲突。
* **CSS模块**：局部作用域，适合组件化开发。
* **CSS-in-JS**：动态样式和主题支持，但学习曲线较高。
* **内联样式**：简单但难以维护。

== 总结 ==
Next.js提供了多种样式方法，每种方法各有优缺点。选择合适的方法取决于项目需求和团队偏好。对于初学者，建议从CSS模块开始，逐步探索CSS-in-JS等高级技术。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]