Styled-components 集成

概述

在本教程中，我们将学习如何在 Next.js 项目中集成 Styled-components。Styled-components 是一个流行的 CSS-in-JS 库，它允许你在 React 组件中直接编写样式，并且这些样式是组件作用域的，避免了全局样式冲突的问题。

为什么选择 Styled-components？

• 组件作用域样式：样式仅作用于特定组件，避免全局样式冲突。
• 动态样式：可以根据组件的 props 动态生成样式。
• 易于维护：样式与组件紧密结合，便于维护和重构。

安装 Styled-components

首先，我们需要在 Next.js 项目中安装 Styled-components。

npm install styled-components

如果你使用 TypeScript，还需要安装类型定义：

npm install @types/styled-components

配置 Next.js 项目

为了确保 Styled-components 在服务端渲染（SSR）时正常工作，我们需要在 _document.js 文件中进行一些配置。

创建 _document.js

在 pages 目录下创建一个 _document.js 文件，内容如下：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

这个文件的主要作用是确保在服务端渲染时，Styled-components 的样式能够正确地注入到 HTML 中。

使用 Styled-components

现在我们已经完成了配置，可以在组件中使用 Styled-components 了。

创建一个简单的组件

在 pages 目录下创建一个 index.js 文件，内容如下：

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 2em;
  color: palevioletred;
`;

const Container = styled.div`
  text-align: center;
  padding: 4em;
  background: papayawhip;
`;

export default function Home() {
  return (
    <Container>
      <Title>Hello, Styled-components!</Title>
    </Container>
  );
}

在这个例子中，我们创建了两个样式化的组件：Title 和 Container。Title 是一个样式化的 h1 标签，Container 是一个样式化的 div 标签。

运行项目

现在，你可以运行你的 Next.js 项目，查看效果：

npm run dev

打开浏览器，访问 http://localhost:3000，你应该会看到一个带有样式的标题。

动态样式

Styled-components 还支持根据组件的 props 动态生成样式。

示例：动态按钮

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export default function Home() {
  return (
    <Container>
      <Title>Hello, Styled-components!</Title>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </Container>
  );
}

在这个例子中，Button 组件的样式会根据 primary 属性的值动态变化。

实践练习

练习 1：创建一个响应式布局

使用 Styled-components 创建一个简单的响应式布局。布局应包含一个导航栏、一个内容区域和一个页脚。导航栏和页脚应固定在页面顶部和底部，内容区域应根据屏幕大小自动调整。

练习 2：动态主题切换

创建一个可以切换主题的应用。主题应包括不同的颜色方案（如亮色和暗色）。用户可以通过点击按钮在不同主题之间切换。

总结

在本教程中，我们学习了如何在 Next.js 项目中集成 Styled-components，并了解了如何使用它来创建样式化的组件和动态样式。Styled-components 是一个强大的工具，可以帮助你更好地组织和管理 React 应用的样式。

通过实践练习，你可以进一步巩固所学知识，并探索 Styled-components 的更多高级功能。