修改所选ListItem的子元素样式

Question

我在解决如何将样式传递给素材UI组件以及修改具有活动状态的元素样式时遇到了一些问题。我目前正在关注“可选列表”选项here下提供的示例。

我可以通过HOC中的selectedItemStyle道具修改列表活动列表项的某些样式，但是会覆盖某些样式。例如，secondaryTextColor的颜色被覆盖，我不知道如何覆盖默认值，除了给它一个类并使用!important这不是首选。我的HOC的一个例子如下。

import {List, makeSelectable} from 'material-ui/List';
import { tealA700 } from 'material-ui/styles/colors'

let SelectableList = makeSelectable(List);

function wrapState(ComposedComponent) {
  return class SelectableList extends Component {
    static propTypes = {
      children: PropTypes.node.isRequired,
      defaultValue: 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}
          selectedItemStyle={{backgroundColor: tealA700, color: 'white', secondaryTextColor: 'white'}}
        >
          {this.props.children}
        </ComposedComponent>
      );
    }
  };
}

SelectableList = wrapState(SelectableList);

export default SelectableList