[material-ui] Composing a theme with multiple `experimental_extendTheme` calls throws error about material-ui HOT 3 OPEN

Why do you need to call extendTheme based on the existing theme? It's not designed to be used like this. If you need multiple themes, they should be independent or you should extract shared tokens.

const tokens = { … };
cons theme1 = extendTheme(tokens);
const theme2 = extendTheme(tokens);

from material-ui.

It's not designed to be used like this

Is it not supposed to mimic createTheme? According to the docs here:

When the value for a theme option is dependent on another theme option, you should compose the theme in steps.

let theme = createTheme({
  palette: {
    primary: {
      main: '#0052cc',
    },
    secondary: {
      main: '#edf2ff',
    },
  },
});

theme = createTheme(theme, {
  palette: {
    info: {
      main: theme.palette.secondary.main,
    },
  },
});

The app I'm trying to migrate from createTheme to extendTheme uses this idea of constructing the theme in steps. I know it's still experimental but the docs kind of imply that extendTheme and createTheme can be 1:1 swapped for each other

from material-ui.

Having the same issue over here. My use case is that I have a function that is used to automatically configure locales for various themes. So it takes a language and an existing theme object and adds the locales to it. Works with createTheme, but getting the error above when trying to switch to the new extendTheme.

export const useThemeWithLocale = (
  language: LanguageType,
  theme: CssVarsTheme,
  ...args: object[]
): CssVarsTheme => {
  const muiLanguage = language.replace(/-/g, '');
  return useMemo(
    () =>
      extendTheme(
        // current theme
        theme,
        // core translations
        muiBaseLocales[muiLanguage],
        // current language
        { language },
        ...args,
      ),
    [args, language, muiLanguage, theme],
  );
};

My current workaround is to take a CssVarsThemeOptions argument instead, but this is less than ideal since not all of the themes that we are dealing with have a separate options object created for them (we don't manage the code for all of the themes that we accept into this function).

from material-ui.