Sidebar option in theming doesn't work

What you were expecting: As docs are saying in order to customise the sidebar and keep it responsive, you have to pass the settings in a theme prop in Admin:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
    sidebar: {
        width: 300, // The default value is 240
        closedWidth: 70, // The default value is 55
    },
});

const App = () => (
    <Admin theme={theme} dataProvider={simpleRestProvider('http://path.to.my.api')}>
        // ...
    </Admin>
);

What happened instead: Unfortunately, it didn’t work, because createMuiTheme doesn’t support sidebar option.

I have found the same question in StackOverflow and there was a solution not to wrap it around createMuiTheme:

const theme = {
  sidebar: {
    width: 220, 
    closedWidth: 55, 
  },
} 

However, it doesn’t work either. I got the following error:

Type '{ sidebar: { width: number; closedWidth: number; }; }' has no properties in common with type 'ThemeOptions'.

Steps to reproduce:

Modify App.tsx with the code from docs or the code in Related Code and you will see a compile error. I use Typescript. Apparently it doesn’t work with TS. Related code: App.tsx:

import * as React from 'react'
import { Admin, Resource} from 'react-admin';
import dataProvider from './dataProvider';
import { cacheDataProviderProxy } from 'react-admin';
import { FeedList } from './components/feeds'
import Layout from './components/layout';
import { CollectionsBookmark } from '@material-ui/icons';

const customDataProvider = cacheDataProviderProxy(dataProvider('http://localhost:8080/api/v1'));

const theme = {
  sidebar: {
    width: 220,
    closedWidth: 55,
  },
}

const App = () => (
    <Admin
        theme={theme}
        dataProvider={customDataProvider}
        loginPage={false}
        title="Title"
        layout={Layout}>
        <Resource name="feeds" list={FeedList} icon={CollectionsBookmark}/>
    </Admin>
);

export default App;

Environment

• React-admin version: ^3.9.4
• React version: ^16.13.1
• Browser: Google Chrome
• Stack trace (in case of a JS error):

TypeScript error in /Users/Mariaefi/Documents/react/admin-is/src/App.tsx(21,9):
Type '{ sidebar: { width: number; closedWidth: number; }; }' has no properties in common with type 'ThemeOptions'.  TS2559

    19 | const App = () => (
    20 |     <Admin
  > 21 |         theme={theme}
       |         ^
    22 |         dataProvider={customDataProvider}
    23 |         loginPage={false}

[mariaefi29]

@djhi Thank you so much!

It works! I added ..defaultTheme though as well, because without that it changes colors again.

I’ll stay tuned for provided types then! Thanks again for your help!

I am new to react, so it’s difficult more me to dig such things on my own yet(

[mariaefi29]

Thank you very much!