Question

我是物质新手。我尝试将菜单组件添加到我的项目中，然后我就可以显示它了。菜单的背景是白色和黑色文字颜色。我想更改颜色以匹配我的应用程序。

我从此链接复制了工作组件代码 - 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}/>

Answer 2

虽然这是一篇相当老的文章，但React和Material UI并不陌生，对吧？所以这是我的解决方案，以防任何人遇到这个。

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

请注意，这会影响您的所有菜单。但出于一致性目的，这不一定是坏事。如果您想要不同的菜单，那么您必须为每个菜单中的每个菜单项设置样式。这是迄今为止Materieal UI所做的最荒谬的事情。所以我希望Material Next有更好的解决方案

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

2 个答案: