无法获得“选定”或“悬停颜色” ListItem。对于选定的尝试设置其类，如：
<ListItem selected button key="home" classes={{ selected: classes.listItemSelected }}>
<ListItemText primary="Hi"/>
</ListItem>
然后将样式设置为：
const useStyles = makeStyles((theme) => ({
listItemSelected:{
backgroundColor: "#ff0000",
},
}));
不过，这并不做任何事情，在“选择”是描述ListItem组件API在这里。
你如何设置这两个颜色的选择和徘徊的ListItem？
下面是处理背景颜色的默认 ListItem 样式部分：
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: {},
});
需要注意的重要一点是，选定的样式是通过两个类（root和selected）的组合完成的，因此如果您尝试使用单个类覆盖它，您将没有足够的特异性。
下面是一个示例，显示了一种覆盖选定和悬停状态的方法：
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",
"& .MuiListItemIcon-root": {
color: "white"
}
},
"&$selected:hover": {
backgroundColor: "purple",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
},
"&:hover": {
backgroundColor: "blue",
color: "white",
"& .MuiListItemIcon-root": {
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>
);
}
相关回答：
您可以sx在MUI v5 中使用该props：
<List
sx={{
// selected and (selected + hover) states
'&& .Mui-selected, && .Mui-selected:hover': {
bgcolor: 'red',
'&, & .MuiListItemIcon-root': {
color: 'pink',
},
},
// hover states
'& .MuiListItemButton-root:hover': {
bgcolor: 'orange',
'&, & .MuiListItemIcon-root': {
color: 'yellow',
},
},
}}
>
或者styled创建一个可以多次重用的样式组件：
import MuiList from '@mui/material/List';
const List = styled(MuiList)({
// selected and (selected + hover) states
'&& .Mui-selected, && .Mui-selected:hover': {
backgroundColor: 'red',
'&, & .MuiListItemIcon-root': {
color: 'pink',
},
},
// hover states
'& .MuiListItemButton-root:hover': {
backgroundColor: 'orange',
'&, & .MuiListItemIcon-root': {
color: 'yellow',
},
},
});