Next.js 15 Fullstack Web Apps · 课时

CSS 模块与全局样式

使用 CSS 模块组织样式，实现局部作用域，并有效管理全局样式。

CSS 模块与全局样式 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Styling Your Next.js App

Welcome to styling in Next.js! Creating visually appealing and user-friendly interfaces is crucial for any web application.

Next.js offers powerful and flexible ways to manage your styles, from simple global stylesheets to component-specific solutions. In this lesson, we'll explore two fundamental methods: CSS Modules and Global Styles.

The Global CSS Problem

In traditional web development, all CSS styles are often global. This can lead to issues:

Naming Conflicts: Two different parts of your application might use the same class name, causing unintended style overrides.
Maintenance Headaches: Changing a style in one place might accidentally break the layout or appearance elsewhere.
Lack of Isolation: Styles aren't tied directly to the components they affect, making it harder to understand and manage them.

CSS Modules were created to solve these problems!

What are CSS Modules?

CSS Modules are a way to locally scope CSS by automatically creating unique class names. This means that styles defined in one CSS Module file will only apply to the component that imports it.

Key benefits:

No Conflicts: Unique class names prevent accidental overrides.
Component Isolation: Styles are encapsulated within their components.
Easier Maintenance: You can confidently change styles without worrying about side effects.

Creating a CSS Module File

To create a CSS Module in Next.js, you simply name your CSS file with the .module.css extension. For example, if you're styling a button, you might create Button.module.css.

Here's what a simple CSS Module might look like:

// app/ui/Button.module.css
.primaryButton {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.primaryButton:hover {
  background-color: #0056b3;
}

Using a CSS Module in React

Once you have a .module.css file, you can import it into any React component. Next.js then processes these styles, making them available as a JavaScript object.

The class names defined in your CSS Module become properties of this imported object. For instance, .primaryButton becomes styles.primaryButton.

Try running this example to see how a component imports and uses a CSS Module. The actual styling would be applied by Next.js during the build process.

// app/ui/PrimaryButton.js
import styles from './Button.module.css'; // Imports the CSS Module

export default function PrimaryButton({ text }) {
  return (
    // 'styles.primaryButton' uses the class from Button.module.css
    <button className={styles.primaryButton}>
      {text}
    </button>
  );
}

// How this component would be used in app/page.js:
// import PrimaryButton from './ui/PrimaryButton';
//
// export default function HomePage() {
//   return (
//     <div>
//       <h1>My App</h1>
//       <PrimaryButton text="Click Me" />
//     </div>
//   );
// }

Global Styles in Next.js

While CSS Modules are great for component-level styling, some styles need to apply universally across your entire application. These are called Global Styles.

You'd use global styles for:

CSS resets (e.g., to normalize browser defaults).
Base typography (e.g., default font family, line height for body).
Layout styles that affect the entire page structure.
Utility classes that are truly global (e.g., .hidden).

Implementing Global Styles

In Next.js 15 with the App Router, global styles are typically imported into your root app/layout.js file. This ensures they are available to all pages and components within your application.

First, create a global CSS file, usually named globals.css in your app directory:

// app/globals.css
html, body {
  padding: 0;
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f8f8fa;
  color: #333;
}

h1 {
  color: #1a1a1a;
  font-size: 2em;
  margin-bottom: 0.5em;
}

Then, import it into your app/layout.js to apply these styles application-wide:

// app/layout.js
import './globals.css'; // Import global styles

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children} {/* All pages will be rendered within this layout */}
      </body>
    </html>
  );
}

// A page (app/page.js) would then automatically inherit these styles:
// export default function HomePage() {
//   return (
//     <main>
//       <h1>Hello, Global Styles!</h1>
//       <p>This text uses the font and color defined in globals.css.</p>
//     </main>
//   );
// }

CSS Modules vs. Global: Best Practices

Knowing when to use each styling method is key to a well-organized Next.js application:

Use CSS Modules for: Component-specific styles. If a style belongs to a single component (e.g., a button, a card, a navigation item), it should likely be in a CSS Module.
Use Global Styles for: Application-wide defaults, resets, base typography, and main layout structures. Styles that truly affect every part of your app or establish a baseline.

Mixing both approaches allows for powerful and maintainable styling.

Combining Styles & Specificity

Sometimes you might need to apply multiple styles or conditional styles. You can combine CSS Module classes with regular global classes, or even inline styles:

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

function MyComponent({ isActive }) {
  const activeClass = isActive ? 'global-active-class' : '';
  return (
    <div className={`${styles.container} ${activeClass}`} >
      ... 
    </div>
  );
}

Remember that CSS specificity rules still apply. More specific selectors (e.g., IDs, inline styles) will override less specific ones (e.g., class names).

Quick Check on Styles

Which of the following statements about styling in Next.js are TRUE?

Recap: Styling for Success

You've mastered the fundamentals of styling in Next.js 15!

CSS Modules provide local scope, solving the global CSS problem with unique class names for component-specific styles.
Global Styles are used for application-wide defaults, resets, and base layouts, typically imported in app/layout.js.

By effectively combining these two powerful methods, you can build maintainable, scalable, and visually consistent Next.js applications. Keep practicing to make your UIs shine!

常见问题解答

「CSS 模块与全局样式」课时是免费的吗？

是的 — 「CSS 模块与全局样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

「CSS 模块与全局样式」这节课中我会学到什么？

使用 CSS 模块组织样式，实现局部作用域，并有效管理全局样式。你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Next.js 15 Fullstack Web Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「CSS 模块与全局样式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？

能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Next.js 15 Fullstack Web Apps