Custom theme: styleOverrides on Ra* components are not applied

What you were expecting:

It being possible to override styles of Ra* components in the theme as in v3.

What happened instead:

Styles specified in the theme are not applied. Styles on Mui* components are, however, applied as expected.

Steps to reproduce:

1. Create a custom theme and pass it to <Admin>
2. Add styleOverrides on react-admin components (see below)
3. Open in browser

Related code:

https://codesandbox.io/s/determined-wilson-k6ifbu?file=/src/index.tsx:722-1068

const theme = _.merge({}, defaultTheme, {
  components: {
    MuiIconButton: {
      styleOverrides: {
        root: {
          // works as expected
          color: "red"
        }
      }
    },
    RaList: {
      styleOverrides: {
        content: {
          // does not work
          backgroundColor: "red"
        }
      }
    }
  }
});

Other information:

Environment

• React-admin version: 4.0.1
• Last version that did not exhibit the issue (if applicable): 3.19.7
• React version: 17.0.2
• Browser: Chrome 100.0.4896.127
• Stack trace (in case of a JS error):

[fzaninotto]

To me it looks like the example in the “Global Theme Overrides” section in documentation is wrong:

Well spotted! Would you like to open a PR to fix it?

[sweco-sedalh]

I haven’t fully understood how MUI wants it now in v5, but from what I understand the overridesResolver (for example https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/ListView.tsx#L171) would need to be adjusted, see for a somewhat related example: https://mui.com/system/styled/#custom-components.

I believe something along these lines should work:

  overridesResolver: (props, styles) => {
    return [
      styles.root,
      {
        [`& .${ListClasses.main}`]: styles.main,
        [`& .${ListClasses.content}`]: styles.content,
        [`& .${ListClasses.actions}`]: styles.actions,
        [`& .${ListClasses.noResults}`]: styles.noResults
      }
    ];
  },