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

Question

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

let SelectableInfiniteList = makeSelectable(Infinite);

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

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

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

有没有办法改变选中项的背景颜色？

Answer 1

我必须使用全局主题覆盖: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",
        },
      },
    },
  },
});