Custom background color for Material-UI menu

Question

I'm new to material-ui. I tried adding the menu component into my project and I was able to display it. The menu's background was white and black text color. I want to change the colors to match my application.

I copied the working component code from this link - http://www.material-ui.com/#/components/menu

I've been adding backgroundColor to different parts of my style object but no luck

import React from 'react';
import Menu from 'material-ui/lib/menus/menu';
import MenuItem from 'material-ui/lib/menus/menu-item';
import Divider from 'material-ui/lib/divider';
import FontIcon from 'material-ui/lib/font-icon';
import ContentCopy from 'material-ui/lib/svg-icons/content/content-copy';
import ContentLink from 'material-ui/lib/svg-icons/content/link';
import Delete from 'material-ui/lib/svg-icons/action/delete';
import Download from 'material-ui/lib/svg-icons/file/file-download';
import PersonAdd from 'material-ui/lib/svg-icons/social/person-add';
import RemoveRedEye from 'material-ui/lib/svg-icons/image/remove-red-eye';

const style = {
  menu: {
    marginRight: 32,
    marginBottom: 32,
    float: 'left',
    position: 'relative',
    zIndex: 0,
    width: 235,
  },
  rightIcon: {
    textAlign: 'center',
    lineHeight: '24px',
  },
  bg: {
    backgroundColor: '#364150',
    color: 'white'
  }
};

const MenuExampleIcons = () => (
  <div style={style.bg}>
    <Menu autoWidth={false} style={style.menu}>
      <MenuItem primaryText="Preview" leftIcon={<RemoveRedEye />} />
      <MenuItem primaryText="Share" leftIcon={<PersonAdd />} />
      <MenuItem primaryText="Get links" leftIcon={<ContentLink />} />
      <Divider />
      <MenuItem primaryText="Make a copy" leftIcon={<ContentCopy />} />
      <MenuItem primaryText="Download" leftIcon={<Download />} />
      <Divider />
      <MenuItem primaryText="Remove" leftIcon={<Delete />} />
    </Menu>
  </div>
);

export default MenuExampleIcons;

Looks like it might be covered here: google.com/design/spec/style/color.html#color-color-palette — Carol McKay
I clicked on that link and then went to UI Color application and I got here developer.android.com/training/material/theme.html#ColorPalette. I am not sure why I am seeing android. I'm not working on an android application. — devwannabe
I went to your link again. I read it but unfortunately, that page doesn't really help at all. — devwannabe
I got it working last night by putting it in getChildContext() { ...} I also learned that it will only affect the element where you have the overriding code. It will not affect the other material-ui elements on other components. — devwannabe

lenewtype lenewtype · Accepted Answer · 2016-07-25T19:09:56

You would have to add a style object to each of your menu items as well.

<MenuItem key={item.key} value={value} style={{backgroundColor: 'red', color: 'white'}} primaryText={item.name}/>

Custom background color for Material-UI menu

2 Answers