Material-ui: selectable MenuItme style in Drawer

[tonytonyjan]

I am wondering if there is any way to make selected MenuItem in Drawer dark background? I can't find any document about this.

I have tried put

in , for example:

<Drawer>
  <Menu value="2">
    <MenuItem value="1" primaryText="one">
    <MenuItem value="2" primaryText="two">
    <MenuItem value="3" primaryText="three">
  </Menu>
</Drawer>

But the appearance of selected menu item became red text with white background instead of black text with dark background.

What I've made:

What I want:

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: chrome Version 51.0.2704.103 (64-bit)

[lesterzone]

Closed without answer ? How did you solved @mbrookes ? Did you figure out @tonytonyjan ?

[tonytonyjan]

@lesterzone I got an answer from gitter. They suggest me use List instead of Menu to approach this.

[lesterzone]

Thanks. I appreciate your quick answer. I'll use List instead.
:+1:

[aflext]

@tonytonyjan Could you please post your code ?

[alexscheelmeyer]

I got it working by copying all the code from the SelectableList example in the docs and embed that in a drawer :

import Drawer from 'material-ui/Drawer';
import {List, ListItem, makeSelectable} from 'material-ui/List';

and :

let SelectableList = makeSelectable(List);

function wrapState(ComposedComponent) {
  return class SelectableList extends React.Component {
    static propTypes = {
      children: React.PropTypes.node.isRequired,
      defaultValue: React.PropTypes.number.isRequired,
    };

    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      });
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index,
      });
    };

    render() {
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {this.props.children}
        </ComposedComponent>
      );
    }
  };
}

SelectableList = wrapState(SelectableList);

and then in render :

      return  <Drawer open={true}>
          <SelectableList defaultValue={0}>
            <ListItem value={0}>Item 1</ListItem>
            <ListItem value={1}>Item 2</ListItem>
            <ListItem value={2}>Item 3</ListItem>
          </SelectableList>
        </Drawer>

[leocifer]

@alexscheelmeyer Is there an option to change the selected list color? I cannot find any such option in the documentation. It just has an option to change hover color.

[InYourDreamz]

I'm looking for a way to change the selected list color as well

[grimunit]

@leoc1f3r @InYourDreamz There is a selectedItemStyle property on the created <SelectableList> component that you can use to change the background color. Like so:

<SelectableList
      key="sideNavSelectableList"
      id="app-nav-selectable-list"
      style={inlineStyles.selectableList}
      value={currNavRoute}
      selectedItemStyle={inlineStyles.listItemSelected}
>
      {itemRows}
</SelectableList>