MenuItem Fix hoverColor muiTheme override

src/List/ListItem.js

@@ -28,7 +28,7 @@ function getStyles(props, context, state) {
   const {listItem} = muiTheme;
 
   const textColor = muiTheme.baseTheme.palette.textColor;
-  const hoverColor = fade(textColor, 0.1);
+  const hoverColor = props.hoverColor || fade(context.muiTheme.baseTheme.palette.textColor, 0.1);
   const singleAvatar = !secondaryText && (leftAvatar || rightAvatar);
   const singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar);
   const twoLine = secondaryText && secondaryTextLines === 1;
@@ -164,6 +164,10 @@ class ListItem extends Component {
      * or `rightToggle` is set.
      */
     disabled: PropTypes.bool,
+    /**
+     * Override hoverColor.
+     */
+    hoverColor: PropTypes.string,
     /**
      * If true, the nested `ListItem`s are initially displayed.
      */
@@ -498,6 +502,7 @@ class ListItem extends Component {
       children,
       disabled,
       disableKeyboardFocus,
+      hoverColor, // eslint-disable-line no-unused-vars
       initiallyOpen, // eslint-disable-line no-unused-vars
       innerDivStyle,
       insetChildren, // eslint-disable-line no-unused-vars

src/MenuItem/MenuItem.js

@@ -297,6 +297,7 @@ class MenuItem extends Component {
         ref="listItem"
         rightIcon={rightIconElement}
         style={mergedRootStyles}
+        hoverColor={this.context.muiTheme.menuItem.hoverColor}
       >
         {children}
         {secondaryTextElement}