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

【问题标题】：How to change background color of a selected ItemList Material-Ui如何更改所选ItemList Material-Ui的背景颜色
【发布时间】：2017-03-28 05:29:52
【问题描述】：

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

let SelectableInfiniteList = makeSelectable(Infinite);

然后把 ListItem 放进去，现在我想改变一个选定项目的默认灰色，但我不知道如何，如果我给它一个 className

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

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

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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案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",
        },
      },
    },
  },
});

【讨论】：

这对我使用 "@material-ui/core": "^4.11.3" 有效。谢谢。

【解决方案2】：

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

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

样式对象应该是这样的。

active: {
  backgroundColor: "red"
}

【讨论】：

对我来说，这被.MuiListItem-root.Mui-selected覆盖了。

【解决方案3】：

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

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。 Material-UI docs.

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

查看ListItemhttps://material-ui.com/api/list-item/#css 的 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>

如果你想为其覆盖全局样式，请关注：

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

使用 Material UI v4，这对我有用：

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

与：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：