Next.js 中如何使用 styled-components？

推荐答案

在 Next.js 中使用 styled-components 需要进行一些额外的配置，以确保样式在服务器端渲染（SSR）时能够正常工作。以下是推荐的步骤：

1. 安装依赖： 首先，安装 styled-components 和 babel-plugin-styled-components：

   npm install styled-components babel-plugin-styled-components

2. 配置 Babel： 在项目根目录下创建或修改 .babelrc 文件，添加 babel-plugin-styled-components 插件：

   {
     "presets": ["next/babel"],
     "plugins": [["styled-components", { "ssr": true, "displayName": true, "preprocess": false }]]
   }

3. 创建全局样式： 在 _app.js 或 _app.tsx 文件中，使用 styled-components 的 createGlobalStyle 来定义全局样式：

   // www.javascriptcn.com code example
   import { createGlobalStyle } from 'styled-components';
   
   const GlobalStyle = createGlobalStyle`
     body {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
   `;
   
   function MyApp({ Component, pageProps }) {
     return (
       <>
         <GlobalStyle />
         <Component {...pageProps} />
       </>
     );
   }
   
   export default MyApp;

4. 使用 styled-components 编写组件： 在组件中使用 styled-components 来定义样式：

   // www.javascriptcn.com code example
   import styled from 'styled-components';
   
   const Button = styled.button`
     background-color: blue;
     color: white;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
   `;
   
   export default function Home() {
     return (
       <div>
         <Button>Click Me</Button>
       </div>
     );
   }

本题详细解读

1. 为什么需要配置 Babel？

styled-components 在服务器端渲染时，需要确保生成的类名在客户端和服务器端保持一致。babel-plugin-styled-components 插件通过为每个组件生成唯一的类名来解决这个问题。配置 ssr: true 确保在服务器端渲染时也能正确生成样式。

2. 全局样式的作用

createGlobalStyle 用于定义全局样式，这些样式会应用到整个应用程序中。在 _app.js 或 _app.tsx 中使用 GlobalStyle 组件，可以确保全局样式在所有页面中都生效。

3. 组件样式的编写

styled-components 允许你直接在组件中编写 CSS，这样可以更好地封装样式，避免全局样式污染。通过 styled.button 这样的语法，你可以为按钮组件定义样式，并且这些样式只会在该组件中生效。

4. 服务器端渲染的支持

Next.js 默认支持服务器端渲染（SSR），而 styled-components 也提供了对 SSR 的支持。通过配置 Babel 插件，确保在服务器端渲染时样式能够正确生成并注入到 HTML 中，从而避免样式闪烁问题。

5. 样式的作用域

styled-components 通过生成唯一的类名来确保样式的作用域仅限于当前组件，这样可以避免样式冲突，提高代码的可维护性。

通过以上步骤，你可以在 Next.js 项目中顺利使用 styled-components，并确保样式在服务器端和客户端都能正确渲染。