如何更改所選項目列表的背景顏色 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",
        },
      },
    },
  },
});

Answer 2

通過像這樣傳遞selected樣式來更改默認選定的灰色。

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

樣式對象應該是這樣的。

active: {
  backgroundColor: "red"
}

Answer 3

在您的高階組件中添加新屬性 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 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

您可以使用 Mui 全局主題覆蓋，它基本上會使用樣式屬性覆蓋項目中的所有 ListItems-

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

但是，如果您希望所選組件具有不同的樣式，您也可以使用 id/class name

Answer 6

您可以使用 Mui 全局主題覆蓋，它基本上會使用樣式屬性覆蓋項目中的所有 ListItems-

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

但是，如果您希望所選組件具有不同的樣式，您也可以使用 id/class name

Answer 7

如果您更喜歡本地自定義樣式，您可以通過classes覆蓋material-ui的組件樣式（ https://material-ui.com/customization/components/#overriding-styles-with-classes ）

• 在https://material-ui.com/api/list-item/#css檢查ListItem的 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

Answer 8

使用 Material UI v4，這對我有用：

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

和：

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

Answer 9

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

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

Answer 10

基於 TablePagination 組件（Material UI v3.9.4）的 CSS 規則：

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

Answer 11

使用樣式化組件時效果最佳：

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

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