- return <List component="div" style={{paddingBottom: '3px', paddingTop: '3px'}}>
- {this.props.items && this.props.items.map((it: TreeItem<T>, idx: number) =>
- <div key={`item/${level}/${idx}`}>
- <ListItem button onClick={() => this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 15, paddingBottom: '3px', paddingTop: '3px'}}>
- {it.active ? colorArrows(it.open, "#4285F6") : colorArrows(it.open, "#333")}
- {this.props.render(it)}
+ const {classes, render, toggleItem, items} = this.props;
+ const {list, arrow, activeArrow} = classes;
+ return <List component="div" className={list}>
+ {items && items.map((it: TreeItem<T>, idx: number) =>
+ <div key={`item/${level}/${idx}`}>
+ <ListItem button onClick={() => toggleItem(it.id)} className={list} style={{paddingLeft: (level + 1) * 20}}>
+ {this.renderArrow(true, it.active ? activeArrow : arrow, it.open)}
+ {render(it, level)}