如何更改所选 ItemList Material-Ui 的背景颜色

Question

我使用 Material-UI 创建了一个可选择的组件

let SelectableInfiniteList = makeSelectable(Infinite);

并将 ListItem 放入其中，现在我想更改所选项目的默认灰色，但我不知道如何给它一个类名

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

并使用 list-item:focus 选择器我可以更改背景颜色，只要它被聚焦（但如果我单击应用程序中的其他地方）焦点就会丢失并且灰色显示在（仍然）选定的项目上，

有没有办法更改所选项目的背景颜色？

原文由 high incompetance 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的高阶组件中添加新属性 selectedItemStyle！

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

selectedItemStyle 在哪里

const slectedItemStyle = {
 backgroundColor: 'red'
}

原文由 high incompetance 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不得不使用全局主题覆盖： https ://material-ui.com/customization/components/#global-theme-override

 const muiTheme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&$selected": {
          backgroundColor: "red",
          "&:hover": {
            backgroundColor: "orange",
          },
        },
      },
      button: {
        "&:hover": {
          backgroundColor: "yellow",
        },
      },
    },
  },
});

原文由 thisismydesign 发布，翻译遵循 CC BY-SA 4.0 许可协议