CSS Material-UI 菜单的自定义背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35079675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom background color for Material-UI menu
提问by devwannabe
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.
我是 Material-ui 的新手。我尝试将菜单组件添加到我的项目中，并且能够显示它。菜单的背景是白色和黑色的文字颜色。我想更改颜色以匹配我的应用程序。
I copied the working component code from this link - http://www.material-ui.com/#/components/menu
我从这个链接复制了工作组件代码 - http://www.material-ui.com/#/components/menu
I've been adding backgroundColor to different parts of my style object but no luck
我一直在将 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;
回答by lenewtype
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}/>
回答by LOTUSMS
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.
尽管这是一篇相当老的帖子，但对于 React 和 Material UI 来说，什么不是新鲜事，对吧？所以这是我的解决方案，以防万一有人遇到这个问题。
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
请记住，这会影响您的所有菜单。但这对于一致性来说不一定是坏事。如果您想拥有不同的菜单，那么您必须为每个菜单中的每个单独的菜单项设置样式。这是迄今为止 Material UI 所做的最荒谬的事情。所以我希望 Material Next 会有更好的修复
