如何在材料UI中使用sx prop来实现仅当组件被选中时的样式?

Question

如下面的代码所示，我已经配置了useState，这样当单击ListItem时，selected为true。当我想做的是在项目被选中时实现特定的样式。我想在第6个道具中做到这一点，而不是使用样式组件，因为对于这样简单的样式来说，这是不必要的。我想要的是，当一个listtitem被选中时，listtitemtext变成蓝色，而listtitem变成浅蓝色。

import { useState } from 'react'
import { Box, Drawer, CssBaseline, AppBar, Toolbar, Avatar, List } from '@mui/material';
import Typography from '@mui/material/Typography';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined"
import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined"
import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined"
import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
import HelpOutlinedIcon from "@mui/icons-material/HelpOutlined"
import PieChartOutlineOutlinedIcon from "@mui/icons-material/PieChartOutlineOutlined"
import TimelineOutlinedIcon from "@mui/icons-material/TimelineOutlined"
import FolderSharedOutlinedIcon from '@mui/icons-material/FolderSharedOutlined';
import { Link as RouterLink } from 'react-router-dom'
import { useTheme } from '@mui/material'
import { ColorModeContext, tokens } from "./../theme"
import { useContext } from 'react';
import Logo from "./../assets/code2.jpg"
const SideBar = () => {
const theme = useTheme();
const colorMode = useContext(ColorModeContext);
const colors = tokens(theme.palette.mode);
const [selected, setSelected] = useState("Dashboard")
const handleListItemClick = (text) => {
setSelected(text)
}
const Item = ({ icon, text, to, selected }) => {
console.log(selected === text);
return (
<ListItem key={text}
selected={selected === text}
disablePadding
onClick={() => handleListItemClick(text)}
sx={{
"&$selected": {
"& .MuiListItem.Mui-selected": {
backgroundColor: "blue",
}
},
"&$selected:hover": {
backgroundColor: "white",
'& .MuiListItem-root': {
color: "white"
}
}
}}>
<ListItemButton component={RouterLink} to={to}>
<ListItemIcon>
{icon}
</ListItemIcon>
<ListItemText selected={selected === text} primary={text}
sx={{
"&$selected": {
"& .MuiListItemText.Mui-selected": {
color: "blue",
}
}}}                    />
</ListItemButton>
</ListItem>)
}
return (
<Drawer sx={{
width: 240,
flexShrink: 0,
'& .MuiDrawer-paper': {
p: 2,
width: 240,
boxSizing: 'border-box',
backgroundColor: `${colors.primary[500]}`,
}
}} variant="permanent" anchor="left">
<Box textAlign="center" m="0 0 15px 0">
<Typography variant="h3" color={colors.grey[100]} fontWeight="bold" sx={{ m: "10px 0 0 0" }}> ADMINIS</Typography>
</Box>
<Box mb="10px">
<Box display="flex" justifyContent="center" alignItems="center">
<Avatar alt="logo" src={Logo} sx={{ width: 100, height: 100, cursor: "pointer"}} />
</Box>
</Box>
<Box textAlign="center">
<Typography variant="h2" color={colors.grey[100]} fontWeight="bold" sx={{ m: "10px 0 0 0" }}> Huvon Goodridge</Typography>
<Typography variant="h5" color={colors.greenAccent[500]}>VP Fancy Admin</Typography>
</Box>
<List>
<Item selected={selected} icon={<HomeOutlinedIcon />} text={"Dashboard"} to={'dashboard'} />
</List>
<Typography variant="h6" color={colors.grey[300]} sx={{ m: "15px 0px 0px 5px" }}>
Data
</Typography>
<List>
<Item selected={selected} icon={<PeopleOutlinedIcon />} text={"Team"} to={'team'} />
<Item selected={selected} icon={<FolderSharedOutlinedIcon />} text={"Projects"} to={"projects"} />
</List>
<Typography variant="h6" color={colors.grey[300]} sx={{ m: "15px 0px 0px 5px" }}>
Pages
</Typography>
<List>
<Item selected={selected} icon={<PersonOutlinedIcon />} text={"Profile"} to={'profile'} />
<Item selected={selected} icon={<CalendarTodayOutlinedIcon />} text={"Calendar"} to={'calendar'} />
<Item selected={selected} icon={<HelpOutlinedIcon />} text={"FAQ"} to={'faq'} />
</List>
<Typography variant="h6" color={colors.grey[300]} sx={{ m: "15px 0px 0px 5px" }}>
Charts
</Typography>
<List>
<Item selected={selected} icon={<PieChartOutlineOutlinedIcon />} text={"Pie Chart"} to={'piechart'} />
<Item selected={selected} icon={<TimelineOutlinedIcon />} text={"Timeline"} to={'timeline'} />
</List>
</Drawer>)
}
export default SideBar;

我已经尝试了多种方法来选择我想要的组件的类，但无济于事。我期望这会改变背景颜色，但它没有，而且，它未能改变文本颜色。我已经看了材料ui网站上的文档，但它没有帮助。

Answer 1

要使用sxprop来为所选组件添加样式，可以尝试为&.Mui-selected和&.Mui-selected:hover属性名称添加样式。

示例:(在:stackblitz上有一个简化的实时演示)

<ListItemButton
sx={{
"&.Mui-selected": { backgroundColor: "hotpink", color: "#fff" },
"&.Mui-selected:hover": {
backgroundColor: "hotpink",
},
}}
></ListItemButton>