tsms/src/theme/ThemeRegistry.tsx

"use client";
import * as React from "react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import NextAppDirEmotionCacheProvider from "./EmotionCache";
import theme from "./devias-material-kit";
import { zhHK, enUS } from "@mui/material/locale";

const getLocalizationFromLang = (lang: string) => {
  switch (lang) {
    case "zh":
      return zhHK;
    default:
      return enUS;
  }
};

// Copied from https://github.com/mui/material-ui/blob/master/examples/material-ui-nextjs-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
export default function ThemeRegistry({
  children,
  lang,
}: {
  children: React.ReactNode;
  lang: string;
}) {
  const themeWithLocale = React.useMemo(
    () => createTheme(theme, getLocalizationFromLang(lang)),
    [lang],
  );

  return (
    <NextAppDirEmotionCacheProvider options={{ key: "mui" }}>
      <ThemeProvider theme={themeWithLocale}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </NextAppDirEmotionCacheProvider>
  );
}