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

Question

我是 Material-ui 的新手。我尝试将菜单组件添加到我的元素中，并且能够显示它。菜单的背景是白色和黑色的文字颜色。我想更改颜色以匹配我的应用程序。

我从这个链接复制了工作组件代码 - http://www.material-ui.com/#/components/menu

我一直在为我的样式对象的不同部分添加 backgroundColor，但没有成功

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}/>