如何在Material UI中设置ListItem的选定颜色和悬停颜色? [英] How to set selected and hover color of ListItem in Material UI?

问题描述

无法获得选定"或悬停颜色"以用于ListItem.对于选定的尝试设置其类，如:

 < ListItem selected button key ="home" classes = {{selected:classes.listItemSelected}}>< ListItemText primary ="Hi"/>/ListItem> 

，然后将样式设置为:

  const useStyles = makeStyles((theme)=>({listItemSelected:{backgroundColor:#ff0000"，}，})); 

但是它什么也没做，这里的ListItem组件API中描述了'selected':

相关答案:

• 如何覆盖材料ui REACTjs中的menuItem中的选定类?
• 如何使用"onclick"按钮更改ListItem元素的样式.活动吗?

Can't get 'selected' or 'hover colors to work for ListItem. For selected tried setting its classes like:

<ListItem selected button key="home" classes={{ selected: classes.listItemSelected }} >
            <ListItemText primary="Hi"/>
/ListItem>

and then setting the style like:

const useStyles = makeStyles((theme) => ({

  listItemSelected:{
    backgroundColor: "#ff0000",
  },

}));

But it doesnt do anything, the 'selected' is described in the ListItem component API here: https://material-ui.com/api/list-item/

How do you get to set the color of both the selected and hover for ListItem?

解决方案

Below is the portion of the default ListItem styles that deals with the background color:

export const styles = (theme) => ({
  /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
  root: {
    '&$focusVisible': {
      backgroundColor: theme.palette.action.selected,
    },
    '&$selected, &$selected:hover': {
      backgroundColor: theme.palette.action.selected,
    },
    '&$disabled': {
      opacity: 0.5,
    },
  },
  /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
  focusVisible: {},
  /* Styles applied to the inner `component` element if `button={true}`. */
  button: {
    transition: theme.transitions.create('background-color', {
      duration: theme.transitions.duration.shortest,
    }),
    '&:hover': {
      textDecoration: 'none',
      backgroundColor: theme.palette.action.hover,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Pseudo-class applied to the root element if `selected={true}`. */
  selected: {},
});

The important thing to notice is that the selected styling is done via a combination of two classes (root and selected), so if you try to override it using a single class you will not have sufficient specificity.

Below is an example showing one way to override the selected and hover states:

import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import MuiListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}));

const ListItem = withStyles({
  root: {
    "&$selected": {
      backgroundColor: "red",
      color: "white"
    },
    "&$selected:hover": {
      backgroundColor: "purple",
      color: "white"
    },
    "&:hover": {
      backgroundColor: "blue",
      color: "white"
    }
  },
  selected: {}
})(MuiListItem);

export default function SelectedListItem() {
  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

  return (
    <div className={classes.root}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItem
          button
          selected={selectedIndex === 0}
          onClick={event => handleListItemClick(event, 0)}
        >
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </ListItem>
        <ListItem
          button
          selected={selectedIndex === 1}
          onClick={event => handleListItemClick(event, 1)}
        >
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </ListItem>
      </List>
      <Divider />
      <List component="nav" aria-label="secondary mailbox folder">
        <ListItem
          button
          selected={selectedIndex === 2}
          onClick={event => handleListItemClick(event, 2)}
        >
          <ListItemText primary="Trash" />
        </ListItem>
        <ListItem
          button
          selected={selectedIndex === 3}
          onClick={event => handleListItemClick(event, 3)}
        >
          <ListItemText primary="Spam" />
        </ListItem>
      </List>
    </div>
  );
}

Related answers:

• How to overried the selected classes in menuItem in material ui REACTjs?
• How to change the styles of ListItem element with the "onclick" event?

这篇关于如何在Material UI中设置ListItem的选定颜色和悬停颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！