javascriptreactjsmaterial-ui

How to change background color of a selected ItemList Material-Ui

I have created a selectable component using Material-UI

let SelectableInfiniteList = makeSelectable(Infinite);

and put ListItem inside, now I want to change the default grayish color of a selected item, but I don't know how, if I give it a className

<ListItem className="list-item" primaryText={i}/>

and use list-item:focus selector I can change the background color as long as it is focused (but if I click somewhere else in the app) the focus is lost and the gray color shows up on the (still) selected item,

is there a way to change the selected item background color?

Solution

  • In your Higher Order Component add new property selectedItemStyle!

    <ComposedComponent selectedItemStyle={selectedItemStyle} value={this.state.selectedIndex} onChange={this.handleRequestChange} containerHeight={this.props.containerHeight} elementHeight={40}>
   {this.props.children}
</ComposedComponent>

    Where selectedItemStyle is:

    const selectedItemStyle = {
 backgroundColor: 'red'
}