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

Question

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

let SelectableInfiniteList = makeSelectable(Infinite);

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

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

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

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

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",
        },
      },
    },
  },
});

Answer 2

在您的高阶组件中添加新属性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'
}

Answer 3

通过selected像这样传递样式来更改默认选择的灰色。

<ListItem
        button
        selected={true}
        classes={{ selected: classes.active }}>
  <ListItemText primary={item.name} />
</ListItem>

样式对象应该是这样的。

active: {
  backgroundColor: "red"
}

Answer 4

如果您对不覆盖全局样式的方法感兴趣，

import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    '&$selected': {
      backgroundColor: 'red',
      '&:hover': {
        backgroundColor: 'yellow',
      }
    },
  },
  selected: {},
});

const CustomSelectedListItem = (
  <ListItem
    button
    classes={{ root: classes.root, selected: classes.selected }}
    selected
  >
    <ListItemText primary="List Item" />
  </ListItem>
);

代码沙盒。Material-UI文档。

Answer 5

const theme = createTheme({
  components: {
    MuiListItem: {
      styleOverrides: {
        root: {
          backgroundColor: 'blue',

          '&.Mui-selected': {
            backgroundColor: 'red',
          },
        },
      },
    },
  },
});