面试题：Next.js中CSS Modules与动态样式结合

实现思路

存储主题偏好：可以使用 localStorage 来持久化用户的主题偏好，也可以使用 React 的上下文（Context）在组件树中共享主题状态。
动态加载 CSS Modules：利用 Next.js 的 CSS Modules 特性，通过在组件中根据主题状态引入不同的 CSS Modules 文件。
更新样式：当主题偏好改变时，重新渲染组件并应用新的样式。

关键代码片段

创建主题上下文（可选，用于在组件树中共享主题状态）

import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

主题切换逻辑及状态管理

import React, { useState, useEffect } from'react';
import ThemeContext from './ThemeContext';

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme) {
      setTheme(storedTheme);
    }
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light'? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider };

在组件中根据主题加载不同的 CSS Modules

import React from'react';
import ThemeContext from './ThemeContext';
import lightStyles from './styles/light.module.css';
import darkStyles from './styles/dark.module.css';

const MyComponent = () => {
  const { theme } = React.useContext(ThemeContext);
  const styles = theme === 'light'? lightStyles : darkStyles;

  return (
    <div className={styles.container}>
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

在应用中使用主题切换功能

import React from'react';
import { ThemeProvider } from './ThemeProvider';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
};

export default App;

星途面试题库

面试题：Next.js中CSS Modules与动态样式结合

知识考点

面试题答案

实现思路

关键代码片段