i'm new material-ui. tried adding menu component project , able display it. menu's background white , black text color. want change colors match application.
i copied working component code link - http://www.material-ui.com/#/components/menu
i've been adding backgroundcolor different parts of style object no luck
import react 'react'; import menu 'material-ui/lib/menus/menu'; import menuitem 'material-ui/lib/menus/menu-item'; import divider 'material-ui/lib/divider'; import fonticon 'material-ui/lib/font-icon'; import contentcopy 'material-ui/lib/svg-icons/content/content-copy'; import contentlink 'material-ui/lib/svg-icons/content/link'; import delete 'material-ui/lib/svg-icons/action/delete'; import download 'material-ui/lib/svg-icons/file/file-download'; import personadd 'material-ui/lib/svg-icons/social/person-add'; import removeredeye '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 copy" lefticon={<contentcopy />} /> <menuitem primarytext="download" lefticon={<download />} /> <divider /> <menuitem primarytext="remove" lefticon={<delete />} /> </menu> </div> ); export default menuexampleicons;
you have add style object each of menu items well.
<menuitem key={item.key} value={value} style={{backgroundcolor: 'red', color: 'white'}} primarytext={item.name}/> 
Comments
Post a Comment