MuiCssBaseline component styleOverrides in custom theme is not working

What you were expecting: To be able to change the body background image using MuiCssBaseline component styleOverrides.

What happened instead: body tag is not styled at all by the theme

Steps to reproduce:

Go to: https://stackblitz.com/edit/github-br7omu?file=src%2Findex.tsx,src%2FmyTheme.ts,src%2Fposts%2FPostList.tsx

You should see a fat blue dashed border at the body of the document, but there isn’t. In contrast, RaDatagrid overrides are working.

import { defaultTheme } from 'react-admin';
import indigo from '@mui/material/colors/indigo';
import pink from '@mui/material/colors/pink';
import red from '@mui/material/colors/red';

export const myTheme = {
  ...defaultTheme,
  palette: {
    primary: indigo,
    secondary: pink,
    error: red,
    contrastThreshold: 3,
    tonalOffset: 0.2,
  },
  components: {
    ...defaultTheme.components,
    RaDatagrid: {
      styleOverrides: {
        root: {
          backgroundColor: 'green',
        },
      },
    },
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          border: '20px dashed blue',
        },
      },
    },
  },
};

Other information:

• How to change global styles in MUI 5 in general: https://stackoverflow.com/a/71469625/1385429
• https://github.com/marmelab/react-admin/pull/8216

Environment

• React-admin version: 4.5
• Last version that did not exhibit the issue (if applicable): n/a
• React version: 18
• Browser: Chrome

[christiaanwesterbeek]

Thanks man! I was trying al sorts of combinations including MuiScopedCssBaseline, but didn’t try ScopedCssBaseline…

[WiXSL]

You are right! Sorry I missed that