Divider and Icons not respecting color within MuiDrawer

[kevinwolfcr]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Divider and Icon components should respect color override within a MuiDrawer.

Current Behavior 😯

Divider and Icon components are not respecting color override within a MuiDrawer.

Steps to Reproduce 🕹

1. Create a new theme

import { createMuiTheme } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";

export default createMuiTheme({
  palette: {
    primary: colors.deepOrange
  },

  overrides: {
    MuiDrawer: {
      paper: {
        backgroundColor: colors.grey[900],
        color: colors.grey[100]
      }
    }
  }
});

2. Create a Drawer

import React from "react";

import { makeStyles } from "@material-ui/styles";
import * as colors from "@material-ui/core/colors";
import Drawer from "@material-ui/core/Drawer";
import Box from "@material-ui/core/Box";
import Avatar from "@material-ui/core/Avatar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import DashboardIcon from "@material-ui/icons/DashboardTwoTone";
import ClientsIcon from "@material-ui/icons/PeopleTwoTone";
import LoansIcon from "@material-ui/icons/AttachMoneyTwoTone";
import EmployeesIcon from "@material-ui/icons/MotorcycleTwoTone";
import RoutesIcon from "@material-ui/icons/DirectionsTwoTone";
import ReportsIcon from "@material-ui/icons/ShowChartTwoTone";
import SettingsIcon from "@material-ui/icons/SettingsTwoTone";

const DRAWER_WIDTH = 220;

const useStyles = makeStyles({
  drawer: {
    width: DRAWER_WIDTH
  },
  drawerPaper: {
    width: DRAWER_WIDTH
  },
  avatar: {
    backgroundColor: colors.deepOrange[500],
    height: 120,
    width: 120
  }
});

export default function AppMenu() {
  const styles = useStyles();

  return (
    <Drawer
      className={styles.drawer}
      classes={{ paper: styles.drawerPaper }}
      variant="permanent"
      anchor="left"
    >
      <Box
        p={3}
        alignSelf="center"
        display="flex"
        flexDirection="column"
        alignItems="center"
      >
        <Avatar className={styles.avatar}>KW</Avatar>
        <Box mt={2}>
          <Typography align="center" variant="h6">
            Kevin Wolf
          </Typography>
        </Box>
      </Box>

      <Divider />

      <Box flex="auto">
        <List>
          <ListItem button>
            <ListItemIcon>
              <DashboardIcon />
            </ListItemIcon>
            <ListItemText primary="Dashboard" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <ClientsIcon />
            </ListItemIcon>
            <ListItemText primary="Clients" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <LoansIcon />
            </ListItemIcon>
            <ListItemText primary="Loans" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <EmployeesIcon />
            </ListItemIcon>
            <ListItemText primary="Employees" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <RoutesIcon />
            </ListItemIcon>
            <ListItemText primary="Routes" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <ReportsIcon />
            </ListItemIcon>
            <ListItemText primary="Reports" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <SettingsIcon />
            </ListItemIcon>
            <ListItemText primary="Settings" />
          </ListItem>
        </List>
      </Box>

      <Divider />

      <Box p={3}>
        <Button fullWidth variant="contained" color="primary">
          Logout
        </Button>
      </Box>
    </Drawer>
  );
}

Link:

1. https://codesandbox.io/s/elastic-einstein-48pqz

Context 🔦

I know I could have just makeStyles and then manually set the Divider and Icon colours, but using this approach I will lose the ability to switch theme in runtime, for example.

Your Environment 🌎

Tech	Version
Material-UI	v4.2.1

[oliviertassinari]

@iamkevinwolf You can override the color to inherit.

  overrides: {
    MuiDrawer: {
      paper: {
        backgroundColor: colors.grey[900],
        color: colors.grey[100],
        "& .MuiListItemIcon-root": {
          color: "inherit"
        },
        "& .MuiDivider-root": {
          backgroundColor: "currentColor",
          opacity: 0.3
        }
      }
    }
  }

https://codesandbox.io/s/angry-noether-4i4jw

However, I believe that we could have a color prop for the divider component:

color?: 'divider' | 'inherit';

and for the ListItemIcon:

backgroundColor?: 'action.active'  | 'currentColor';

Moving the system to the core component should fix this problem: #15561.

[kevinwolfcr]

Thanks bro! Worked awesome.