我试图突出显示菜单上的所选项目，但无法做到这一点。这是我的代码
import React, {Component} from 'react'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import Collapse from '@material-ui/core/Collapse'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore'
import Drawer from '@material-ui/core/Drawer'
import {withStyles} from '@material-ui/core/styles'
import {Link} from 'react-router-dom'
import menuItems from './menuItems'
import ListItemIcon from "@material-ui/core/ListItemIcon";
const classes = {
root: {
color: 'black',
textAlign: 'left',
textDecoration: 'none',
//borderBottom: '1px solid',
"&.Mui-selected": {
background: 'linear-gradient(#45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: "#505050",
backgroundColor: 'red',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
textDecoration:'bold'
},
"&$selected:hover": {
backgroundColor: "purple",
color: "red",
borderLeft: "2px solid white",
textDecoration: 'none'
},
"&:hover": {
textDecoration: 'none',
backgroundColor: "#505050",
color: "white",
borderLeft: "2px solid white",
}
},
list: {
// borderLeft: "2px solid #73AD21",
position: 'fixed',
top: 30,
background: '#B5B4B6',
align: 'left',
width: 250,
textDecoration: 'none'
},
links: {
"&:hover": {
backgroundColor: "green",
color: "red",
textDecoration: 'none'
}
},
listItem: {
color: 'black',
paddingTop: '0px',
paddingBottom: '0px',
backgroundColor: 'red',
textDecoration: 'none'
},
listSub: {
color: 'red',
textDecoration: 'none'
},
};
class MenuBar extends Component {
constructor(props) {
super(props)
this.state = {}
}
handleClick(item) {
this.setState(prevState => (
{[item]: !prevState[item]}
))
}
handler(children) {
const {classes} = this.props
const {state} = this
const pd = menuItems.data.pad
return children.map((subOption) => {
if (!subOption.children) {
return (
<div key={subOption.name}>
<Link
to={subOption.url}
className={classes.root}
>
<ListItem
button divider={true}
dense={true}
className={classes.root}
key={subOption.name}>
<ListItemIcon>
<Myicon name={subOption.icn}/>
</ListItemIcon>
<ListItemText
// inset
primary={subOption.name}
/>
</ListItem> </Link>
</div>
)
}
return (
<div key={subOption.name}>
<ListItem
button
divider
dense
className={classes.root}
onClick={() => this.handleClick(subOption.name)}>
<ListItemText
//inset
primary={subOption.name}/>
{state[subOption.name] ?
<ExpandLess/> :
<ExpandMore/>
}
</ListItem>
<Collapse style={{paddingLeft: 30, backgroundColor: 'white'}}
in={state[subOption.name]}
timeout="auto"
unmountOnExit
>
{this.handler(subOption.children)}
</Collapse>
</div>
)
})
}
render() {
const {classes, drawerOpen, menuOptions} = this.props
return (
<Drawer
variant="persistent"
anchor="left"
open
classes={{paper: classes.list}}
>
<div >
<List
>
{this.handler(menuItems.data,selectedItem)}
</List>
</div>
</Drawer>
)
}
}
export default withStyles(classes)(MenuBar)
使用上面的代码并尝试了一些更改，但它不起作用。我正在使用 React js。菜单项是从单独创建的 JSON 文件中获取的。我创建了一个状态变量，并尝试在状态中设置选择，还尝试将选择作为道具传递，两者都不适合我。
终于解决了这个问题，这是解决方案
const styles = {
root: {
color: 'black',
textAlign: 'left',
textDecoration: 'none',
//borderBottom: '1px solid',
"&:hover": {
textDecoration: 'none',
backgroundColor: "#505050",
color: "white",
// borderLeft: "2px solid white",
}
},
selected:{
"&$selected, &.Mui-selected": {
// background: 'linear-gradient(#45deg, #FE6B8B 30%, #FF8E53 90%)',
// borderRadius: 3,
// border: 0,
// color: "#505050",
borderBottom:'2px solid red',
// backgroundColor: 'red',
// height: 48,
// padding: '0 30px',
// boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
// textDecoration:'bold'
},
"&$selected:hover": {
backgroundColor: "#505050",
color: "white",
// borderLeft: "2px solid white",
textDecoration: 'none'
},
},
list: {
// borderLeft: "2px solid #73AD21",
position: 'fixed',
top: 30,
background: '#B5B4B6',
align: 'left',
width: 250,
textDecoration: 'none'
},
links: {
"&:hover": {
backgroundColor: "green",
color: "red",
textDecoration: 'none'
}
},
listBtn: {
paddingLeft: '0',
background: '#B5B4B6',
hoverColor: 'red',
hoverBackgroundColor: 'red',
textDecoration: 'none'
},
menuHeader: {
color: 'white',
// background: 'linear-gradient(#B5B4B6, #B5B5B8 50%, #FF8E53 90%)',
// boxShadow: '0 3px 5px 0px rgba(255, 200, 135, .8)',
borderBottom:'2px solid gray',
textDecoration: 'none'
},
listItem: {
color: 'black',
paddingTop: '0px',
paddingBottom: '0px',
backgroundColor: 'red',
textDecoration: 'none'
},
listSub: {
color: 'red',
textDecoration: 'none'
},
};
我已经更改了它的状态并更新了句柄单击（）上的选定状态
constructor(props) {
super(props);
this.state = {
selected: ""
};
}
handleClick(item) {
this.setState((prevState) => ({
[item]: !prevState[item],
selected: item // Update the selected state
}));
}
作为回报，我根据所选状态有条件地应用了样式
return (
<div key={subOption.name}>
<Link to={subOption.url} className={`${classes.root} ${selected === subOption.name ? classes.selected : ''}`}>
<ListItem
button
divider
dense
className={`${classes.root} ${selected === subOption.name ? classes.selected : ''}`}
onClick={() => this.handleClick(subOption.name)}
>
<ListItemIcon>
<Myicon name={subOption.icn} />
</ListItemIcon>
<ListItemText primary={subOption.name} />
{subOption.children && (this.state[subOption.name] ? <ExpandLess /> : <ExpandMore />)}
</ListItem>
</Link>
{subOption.children && (
<Collapse
style={{ paddingLeft: 30, backgroundColor: 'white' }}
in={this.state[subOption.name]}
timeout="auto"
unmountOnExit
>
{this.handler(subOption.children)}
</Collapse>
)}
</div>
);
更改导出为
export default withStyles(styles)(MenuBar);
我希望这会有所帮助