[docs] Configuring the theme - multiple Localization needs more explanation #336

jy95 · 2024-12-01T12:16:27Z

Kind of issue

Missing information

Issue description

Currently, I have some provider to the theme :

"use client";

// src/providers/ThemeProvider.tsx
import { createTheme, ThemeProvider as MUIThemeProvider } from '@mui/material/styles';

import { useMemo } from 'react';
import { useAsyncMemo } from '@/hooks/useAsyncMemo';


export function ThemeProvider({ children, lng }: { children: React.ReactNode, lng : string }) {

    // Prepare theme for possible darkmode
    const muiLanguage = useAsyncMemo(async () => {
        switch(lng) {
            case 'fr':
                const { frFR : language} = await import("@mui/material/locale");
                return language;
            // English is by default built-in in @mui package, so no need to include
            default:
                return {};
        }
    }, [lng], {} as any);

    const theme = useMemo(
        () =>
            createTheme({
                colorSchemes: { light: true, dark: true },
                cssVariables: {
                    colorSchemeSelector: 'data-toolpad-color-scheme',
                }
            }, muiLanguage),
        [muiLanguage],
    );

    return (
        <MUIThemeProvider theme={theme}>
            {children}
        </MUIThemeProvider>
    )
}

Which it is used like that in my src/app/[locale]/layout.tsx :

type Props = {
  children: React.ReactNode,
  params: Promise<{
    locale: "en" | "fr"
  }>
}

export default async function RootLayout(props: Props) {
  const params = await props.params;

  const {
    locale
  } = params;

  const {
    children
  } = props;

  // To catch with stuff that aren't a locale
  let resolvedLocale = (routing.locales.includes(locale)) ? locale : "fr";
  
  return (
    <html lang={resolvedLocale}>
      <body>
           <ThemeProvider lng={resolvedLocale}>
                  .... // rest of the component
                  {children}
            </ThemeProvider>
      </body>
    </html>
  )
}

So it would be nice to have an example with multiple languages, just we have in https://mui.com/material-ui/guides/localization/

Thx in advance

Context

Migrating to Pigment CSS with a Next.js 15 app router web app

Search keywords: createTheme,Localization,locale

The text was updated successfully, but these errors were encountered:

jy95 added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Dec 1, 2024

zannager added the docs Improvements or additions to the documentation label Dec 2, 2024

zannager assigned alelthomas Dec 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Configuring the theme - multiple Localization needs more explanation #336

[docs] Configuring the theme - multiple Localization needs more explanation #336

jy95 commented Dec 1, 2024 •

edited by github-actions bot

Loading

[docs] Configuring the theme - multiple Localization needs more explanation #336

[docs] Configuring the theme - multiple Localization needs more explanation #336

Comments

jy95 commented Dec 1, 2024 • edited by github-actions bot Loading

Related page

Kind of issue

Issue description

Context

jy95 commented Dec 1, 2024 •

edited by github-actions bot

Loading