MUI v7 – theme.alpha is not a function with React-Admin themes

[djaszak]

What you were expecting:
Using the documented React-Admin theming API (e.g. defaultLightTheme or a custom theme object passed via the theme prop) should work when upgrading an existing React-Admin application to MUI v7, without runtime errors.

In particular, following the official documentation at
https://marmelab.com/react-admin/AppTheme.html

should not cause crashes.

What happened instead:
When upgrading to MUI v7, the application crashes at runtime with the error:

TypeError: theme.alpha is not a function

The error occurs as soon as MUI components (e.g. Button) are rendered.
The stack trace points into MUI internals (e.g. @mui/material/Button), not application code.

This happens whenever a theme is provided via React-Admin’s documented API, e.g.:

<HydraAdmin theme={defaultLightTheme} />

Steps to reproduce:

1. Create or upgrade a React-Admin v5 application

2. Upgrade MUI packages to v7 (e.g. @mui/material@7.5.3)

3. Use React-Admin’s documented theme approach:

import { defaultLightTheme } from 'react-admin';

<HydraAdmin theme={defaultLightTheme} />

4. Start the app

➡️ Runtime error: theme.alpha is not a function

Related code:
Crashing (documented approach)

import { defaultLightTheme } from 'react-admin';

<HydraAdmin
  theme={defaultLightTheme}
/>

Works (manual workaround)

import { createTheme } from '@mui/material/styles';
import { defaultLightTheme } from 'react-admin';

const basicTheme = createTheme({
  ...defaultLightTheme,
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#9c27b0' },
  },
});

<HydraAdmin
  theme={basicTheme}
/>

This workaround suggests that React-Admin’s internal theme creation is incompatible with MUI v7, while a manually created MUI v7 theme works correctly.

Other information:

Environment

• React-Admin version: 5.13.x

• Last version that did not exhibit the issue (if applicable): MUI v6

• @api-platform/admin version: 4.0.7

• MUI version: 7.5.3

• React version: 19

• Browser: Chrome / Firefox

Stack trace (excerpt):

TypeError: theme.alpha is not a function
    at @mui/material/Button/Button.js

[slax57]

Unfortunately I can't reproduce your issue.

I used the simple demo project (which uses MUI v5 by default) and upgraded it to MUI v7 as requested.
I also forced using the defaultLightTheme (which should be the default anyway).
But even with all that, the app runs without errors.

You can find the Stackblitz with my code here: https://stackblitz.com/edit/github-mktctea4?file=src%2Findex.tsx

Feel free to fork it and tweak it until you manage to reproduce you issue in it.

[slax57]

UPDATE: I stumbled across this same issue while working on #11161.
More specifically, I had to apply this commit to fix (or more exactly workaround) the issue: e40df52

This tends to indicate there is indeed a bug when using the latest versions of MUI v7. Marking as Bug, while we push the investigation further...