Javascript 如何更改选定ItemList材质Ui的背景色

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

let SelectableInfiniteList = makeSelectable(Infinite);

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

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

和使用列表项：焦点选择器我可以更改背景颜色，只要它是焦点（但如果我单击应用程序中的其他位置），焦点将丢失，并且灰色显示在（仍然）选定的项目上

---

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

在较高阶组件中添加新属性selectedItemStyle

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

---

通过像这样传递

selected

样式，更改默认选定的灰色

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

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

从“clsx”导入clsx；
从'@material ui/core/styles'导入{makeStyles}；
const useStyles=makeStyles({
根目录：{
“&$selected”：{
背景颜色：“红色”，
“&：悬停”：{
背景颜色：“黄色”，
}
},
},
选定：{}，
});
常量CustomSelectedListItem=(
);

---

。材质UI。

如果您喜欢本地自定义样式，可以通过

类

（）

• 查看

  列表项的CSS部分，我们知道

• 根据需要创建自定义样式

• 覆盖

  列表项

  的

  类

//由“listItemSelected”覆盖规则“selected”

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

---

您可以使用Mui全局主题覆盖，它将基本上用样式属性覆盖项目中的所有列表项-

 MuiMenuItem: {
            root: {
              fontFamily: 'Aria....',
              '&$selected': {
                backgroundColor: '#B2D0EB!important'
              },
              '&:hover': {
                backgroundColor: '#B2D0EB!important',
                color: '#707070!important',
              }
            },
          }

MuiMenuItem: {
          root: {
            fontFamily: 'Aria....',
            '&$selected': {
              backgroundColor: '#B2D0EB!important'
            },
            '&:hover': {
              backgroundColor: '#B2D0EB!important',
              color: '#707070!important',
            }
          },
        }

---

但是，如果希望所选组件具有不同的样式，也可以使用id/类名

可以使用Mui全局主题覆盖，它将基本上使用样式属性覆盖项目中的所有列表项-

 MuiMenuItem: {
            root: {
              fontFamily: 'Aria....',
              '&$selected': {
                backgroundColor: '#B2D0EB!important'
              },
              '&:hover': {
                backgroundColor: '#B2D0EB!important',
                color: '#707070!important',
              }
            },
          }

MuiMenuItem: {
          root: {
            fontFamily: 'Aria....',
            '&$selected': {
              backgroundColor: '#B2D0EB!important'
            },
            '&:hover': {
              backgroundColor: '#B2D0EB!important',
              color: '#707070!important',
            }
          },
        }

---

但是，如果希望所选组件具有不同的样式，也可以使用id/类名

，这将被

.MuiListItem root.Mui selected

覆盖。

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

 MuiMenuItem: {
            root: {
              fontFamily: 'Aria....',
              '&$selected': {
                backgroundColor: '#B2D0EB!important'
              },
              '&:hover': {
                backgroundColor: '#B2D0EB!important',
                color: '#707070!important',
              }
            },
          }

MuiMenuItem: {
          root: {
            fontFamily: 'Aria....',
            '&$selected': {
              backgroundColor: '#B2D0EB!important'
            },
            '&:hover': {
              backgroundColor: '#B2D0EB!important',
              color: '#707070!important',
            }
          },
        }