Merge pull request #4038 from marmelab/fix-sidebar-classesoverride

Fix sidebar classes can't be overridden

docs/Theming.md

@@ -471,7 +471,7 @@ const MyAppBar = props => <AppBar {...props} userMenu={MyUserMenu} />;
 
 ### Sidebar Customization
 
-You can specify the `Sidebar` width by setting the `width` and `closedWidth` property on your custom material-ui them:
+You can specify the `Sidebar` width by setting the `width` and `closedWidth` property on your custom material-ui theme:
 
 ```jsx
 import { createMuiTheme } from '@material-ui/core/styles';
@@ -490,6 +490,28 @@ const App = () => (
 );
 ```
 
+For more advanced sidebar theming, pass your own `Sidebar` component to a custom `Layout`:
+
+```jsx
+import { Sidebar, Layout } from 'react-admin';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useSidebarStyles = makeStyles({
+    drawerPaper: {
+        backgroundColor: 'red',
+    },
+});
+
+const MySidebar = props => {
+    const classes = useSidebarStyles();
+    return (
+        <Sidebar classes={classes} {...props} />
+    );
+};
+
+const MyLayout = props => <Layout {...props} sidebar={MySidebar} />
+```
+
 ### Layout From Scratch
 
 For more custom layouts, write a component from scratch. It must contain a `{children}` placeholder, where react-admin will render the resources. Use the [default layout](https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/Layout.js) as a starting point. Here is a simplified version (with no responsive support):

packages/ra-ui-materialui/src/layout/Sidebar.js

@@ -37,7 +37,13 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const Sidebar = ({ children, closedSize, size, ...rest }) => {
+const Sidebar = ({
+    children,
+    closedSize,
+    size,
+    classes: classesOverride,
+    ...rest
+}) => {
     const dispatch = useDispatch();
     const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
     const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
@@ -54,7 +60,7 @@ const Sidebar = ({ children, closedSize, size, ...rest }) => {
     useSelector(state => state.locale); // force redraw on locale change
     const handleClose = () => dispatch(setSidebarVisibility(false));
     const toggleSidebar = () => dispatch(setSidebarVisibility(!open));
-    const classes = useStyles({ open });
+    const classes = useStyles({ classes: classesOverride, open });
 
     return isXSmall ? (
         <Drawer