Material-UI菜单的自定义背景色

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;

Answer 1

您还必须向每个菜单项添加一个样式对象。

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

Answer 2

Although this is a fairly older post, what isn't new to React and Material UI, right? So here is my solution in case anyone comes across this.

div[role="menu"] > div > span {
    background: red !important;
    color: white !important;
}

Keep in mind, this will affect ALL of your menus. But that isn't necessarily a bad thing for consistency purposes. If you want to have different menus then you'll have to style each and every individual menu item in each menu. This is by far the most ridiculous thing Materieal UI has done yet. So I'm hoping Material Next will have a better fix