[4.0.0-alpha.1]: Style overrides for ReactAdmin components

[emulienfou]

What you were expecting:

Should be able to overrides style for ReactAdmin components

What happened instead:

Nothing since to be happening when applying the overrides. I presume this is not implemented yet!

Steps to reproduce:

1. Create a new theme options object
2. Add components override for RaSidebar by example
3. Override background color of the sidebar

Related code:

import { PaletteMode, Components as MuiComponents } from '@mui/material'
import { RaThemeOptions } from 'react-admin'

interface Components extends MuiComponents {
  RaSidebar?: {
    styleOverrides?: any;
    drawerPaper?: any;
  };
  RaMenuItemLink?: {
    styleOverrides?: any;
  }
}

interface ThemeOptions extends RaThemeOptions {
  components: Components
}

export const themeOptions = (mode: PaletteMode): ThemeOptions => ({
  components: {
    RaSidebar: {
      styleOverrides: { root: { backgroundColor: 'red' } }
    },
    RaMenuItemLink: {
      styleOverrides: { root: { padding: 0 } }
    }
  }
})

Other information:

Should be nice to have an updated version of the type RaThemeOptions including ReactAdmin components as well (like I did in the code bellow)!

Environment

• React-admin version: 4.0.0-alpha.1
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.2
• Browser: Opera/Chrome
• Stack trace (in case of a JS error):
• Typescript version: 4.5.4

[fzaninotto]

Weird, we use style overrides in the ecommerce and crm demos, and they definitely work in next.

https://github.com/marmelab/react-admin/blob/998e254fe09121892b4fc28a97639e50f9c7483b/examples/demo/src/layout/themes.ts#L16-L21

Could you add a link to a CodeSandbow demonstrating the issue?

[emulienfou]

@fzaninotto here is a Codesandbox if you want to check: https://codesandbox.io/s/react-admin-typescript-styles-overrides-tplop

I'm trying to overrides Ra components

[djhi]

Closing this one as duplicate. Thanks for the report