我有下一个错误。我有两个变体的主题在我的应用程序-黑暗和光明。
下面是沙箱-https://codesandbox.io/p/sandbox/trusting-mestorf-1rc2xv?selection=%5B%7B%22endColumn%22%3A7%2C%22endLineNumber%22%3A11%2C%22startColumn%22%3A7%2C%22startLineNumber%22%3A11%7D%5D&file=%2Fpages%2Fboard%2F%5Bslug%5D.tsx

• • 主题上下文. ts**

export const ThemeContext = createContext<{
  theme: AppThemeInterface,
  setTheme: Dispatch<SetStateAction<AppThemeInterface>>,
  // eslint-disable-next-line no-unused-vars
  updateThemeKey: (newThemeKey: ThemeKeys) => void,
}>({
  theme: getTheme(ThemeKeys.DARK) // here is just object with props from interface,
  setTheme: () => null,
  updateThemeKey: () => null,
});

• • AppThemeProvider. ts**这里我从LocalStorage接收theme_key，并通过该键获取主题，然后将其值设置为ThemeContext

export const AppThemeProvider = ({ children }: AppThemeProviderProps) => {
  const [currentThemeKey, setCurrentThemeKey] = useLocalStorage<ThemeKeys>('theme_key', ThemeKeys.DARK);
  const [theme, setTheme] = useState<AppThemeInterface>(getTheme(currentThemeKey));

  const updateThemeKey = (value: ThemeKeys) => {
    setCurrentThemeKey(value);
  };

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

使用本地存储挂钩

import { useState } from 'react';

export const useLocalStorage = <T>(key: string, initialValue: T) => {
  const [value, setValue] = useState<T>(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }
    const lcItem = localStorage.getItem(key);
    const endVal = lcItem ? JSON.parse(lcItem) : initialValue;
    localStorage.setItem(key, JSON.stringify(endVal));
    return endVal;
  });

  const saveValue = (value: T): void => {
    localStorage.setItem(key, JSON.stringify(value));
  };

  const onChangeValue = (value: T): void => {
    saveValue(value);
    setValue(value);
  };

  return [value, onChangeValue] as const;
};

使用这种设置，当LocalStorage中的键与dark不同时，如果LocalStorage中的键为light，则会出现下一个错误

**

• 属性className不匹配。服务器：
  **

这是因为首先它被渲染为黑暗的主题，但随后它又重新渲染为光明的主题。
我不知道如何使它正确渲染