我不得不使用全局主题覆盖：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",
        },
      },
    },
  },
});

通过传递selected样式更改默认选定的灰色，如下所示。

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

Style对象应该是这样的。

active: {
  backgroundColor: "red"
}

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

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>
);

Codesandbox.材料-UI文档。

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

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

其中选定项目样式为

const slectedItemStyle = {
 backgroundColor: 'red'
}

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

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

如果您更喜欢本地自定义样式，可以使用classes覆盖material-ui的组件样式（https：//material-ui.com/customization/components/#overriding-styles-with-classes）

• 查看www.example.com上ListItem的CSS部分https://material-ui.com/api/list-item/#css，我们就会知道

...
selected    .Mui-selected   Pseudo-class applied to the root element if selected={true}.
...

The rule name we would override is: selected

• 创建您想要的自定义样式

// For example
const useStyles = makeStyles((theme) => ({
  listItemSelected: {
    color: 'red',
  },
}));

• 覆盖ListItem的classes

// Override rule "selected" by "listItemSelected"
<ListItem classes={{selected: listItemSelected}}>
  <ListItemText primary={"Hi"} />
</ListItem>

如果要覆盖其全局样式，请执行以下操作：

• https://material-ui.com/customization/components/#overriding-styles-with-global-class-names
• https://material-ui.com/customization/globals/#css

使用材质UI v4，这对我很有效：

<ListItem button classes={{ root: classes.listItemRoot }}>
  ...
</ListItem>

与：

const useStyles = makeStyles((theme) => ({
  listItemRoot: {
    "&.Mui-selected": {
        backgroundColor: 'red',
    }
  },
}));

基于TablePagination组件的CSS规则（材质UI v3.9.4）：

menuItem:{
    "&[class*='MuiMenuItem-selected-']":{
      backgroundColor: "red !important",
    },
  },

使用样式化组件时效果最佳：

const CustomListItem = styled(ListItem)`
         &&.Mui-selected {
           background-color: grey;
         }
    `

Use the the component in your code:
<CustomListItem>
...
</CustomListItem>