面试题：Next.js 与 styled - components 的复杂应用及架构设计

样式架构设计

共享样式
- 创建一个 styles 文件夹，在其中定义通用样式文件，例如 globals.ts。在 globals.ts 中，使用 styled - components 的 createGlobalStyle 创建全局样式，如：

import { createGlobalStyle } from'styled - components';

export const GlobalStyle = createGlobalStyle`
  body {
    font - family: Arial, sans - serif;
    margin: 0;
    padding: 0;
  }
`;

- 对于组件间共享的样式，可以创建 `sharedStyles.ts` 文件，定义可复用的样式组件。例如：

import styled from'styled - components';

export const Button = styled.button`
  padding: 10px 20px;
  background - color: #007BFF;
  color: white;
  border: none;
  border - radius: 5px;
  cursor: pointer;
  &:hover {
    background - color: #0056b3;
  }
`;

- 在各模块组件中，导入共享样式组件使用，如：

import React from'react';
import { Button } from '../styles/sharedStyles';

const MyComponent = () => {
  return <Button>Click me</Button>;
};

export default MyComponent;

主题切换
- 创建主题文件，如 themes.ts。定义不同主题对象，例如：

export const lightTheme = {
  background: '#FFFFFF',
  textColor: '#333333',
  primaryColor: '#007BFF'
};

export const darkTheme = {
  background: '#111111',
  textColor: '#FFFFFF',
  primaryColor: '#FF5733'
};

- 使用 `styled - components` 的 `ThemeProvider` 来切换主题。在应用的顶层组件（如 `_app.tsx`）中：

import React from'react';
import { ThemeProvider } from'styled - components';
import { lightTheme, darkTheme } from '../styles/themes';

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = React.useState(lightTheme);
  const toggleTheme = () => {
    setTheme(theme === lightTheme? darkTheme : lightTheme);
  };

  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} toggleTheme={toggleTheme} />
    </ThemeProvider>
  );
}

export default MyApp;

- 在组件中使用主题样式，例如：

import React from'react';
import styled from'styled - components';

const Container = styled.div`
  background - color: ${({ theme }) => theme.background};
  color: ${({ theme }) => theme.textColor};
  padding: 20px;
`;

const MyComponent = () => {
  return <Container>My content</Container>;
};

export default MyComponent;

可维护性和扩展性
- 遵循命名规范，如 BEM（Block - Element - Modifier）原则，使样式类名具有描述性。
- 拆分样式文件，按功能模块划分，避免单个文件过大。例如，商品列表模块有自己的 productListStyles.ts 文件，详情页有 productDetailStyles.ts 文件。
- 使用 TypeScript 与 styled - components 结合，为样式组件添加类型定义，提高代码的可读性和可维护性。

Next.js 渲染模式下 styled - components 的注意事项

SSR（服务器端渲染）
- 确保在服务器端能够正确渲染样式。styled - components 在 SSR 模式下需要特殊配置，要使用 @next - react - styles 包。首先安装：

npm install @next - react - styles

- 在 `next.config.js` 中配置：

const withReactStyles = require('@next - react - styles')();

module.exports = withReactStyles({
  // 其他 Next.js 配置
});

- 在 `_app.tsx` 中，导入 `ServerStyleSheet` 并在适当的生命周期方法中使用：

import React from'react';
import { ThemeProvider } from'styled - components';
import { ServerStyleSheet } from'styled - components';
import { lightTheme, darkTheme } from '../styles/themes';

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = React.useState(lightTheme);
  const toggleTheme = () => {
    setTheme(theme === lightTheme? darkTheme : lightTheme);
  };

  const sheet = new ServerStyleSheet();
  const page = sheet.collectStyles(<Component {...pageProps} toggleTheme={toggleTheme} />);
  const styleTags = sheet.getStyleElement();

  return (
    <>
      {styleTags}
      <ThemeProvider theme={theme}>
        {page}
      </ThemeProvider>
    </>
  );
}

export default MyApp;

SSG（静态站点生成）
- 在 SSG 模式下，styled - components 的工作方式与客户端渲染类似。但需要注意，在构建时生成静态页面，样式也需要正确生成。确保在 getStaticProps 等方法中，不会出现与样式相关的错误。
- 例如，在一个商品列表页使用 SSG：

import React from'react';
import styled from'styled - components';
import { ProductList } from '../components/ProductList';

const PageContainer = styled.div`
  padding: 20px;
`;

export async function getStaticProps() {
  // 获取商品数据
  const products = await fetchProducts();
  return {
    props: {
      products
    },
    revalidate: 60 // 增量静态再生配置
  };
}

const ProductListPage = ({ products }) => {
  return (
    <PageContainer>
      <ProductList products={products} />
    </PageContainer>
  );
};

export default ProductListPage;

增量静态再生
- 结合 SSG 使用增量静态再生时，styled - components 同样要确保样式在每次重新验证和更新页面时正确渲染。配置 revalidate 参数在 getStaticProps 中，并且保证样式的动态更新不会出现问题。例如上述 SSG 代码中配置了 revalidate: 60，即每 60 秒重新验证页面数据，样式也应随着页面更新正常显示。

星途面试题库

面试题：Next.js 与 styled - components 的复杂应用及架构设计

知识考点

面试题答案

样式架构设计

Next.js 渲染模式下 styled - components 的注意事项