导航菜单列表（子菜单）下拉列表在reactjs中不起作用

Question

I want to implement a navbar like component in reactjs. but pesudo-classes(:hover) for css seem not to be supported by react(css-in-js). I try the another way out to solve the problem using li and state control.

Another problem for this solution is that i can't ripped off the unordered bullet list using display:inline-block or list-style:none because it make the sub-menu items to be disappear when moving my pointer down to them.I am using material-ui/core as UI library

An example of my code:

showMenu = () =>{
    this.setState({showMenu: true});
}

hideMenu = () =>{
    this.setState({showMenu: false});
}

html, css

dropdownMenu:{
    position: "absolute",
    fontSize: "0.9rem",
    marginTop: 0,
    right: 15,
    left: "auto",
    top: "63px",
    backgroundColor:"white", 
    border:"1px solid #D9E4E3", 
    boxShadow: "0px 3px 21px 0px rgba(0, 0, 0, 0.2)",
    animationDuration: "0.25s",
    animationFillMode: "both",
},

<div>
    <li onMouseLeave={this.hideMenu}>
        <div className={classes.sectionDesktop} onMouseEnter={this.showMenu}>
            <Avatar style={{backgroundColor: "transparent"}}><Icon>account_circle</Icon></Avatar>
            <span style={{fontWeight: 500, margin: "0px .5rem", lineHeight: "40px"}}>Louis Barnett</span>
        </div>
        {this.state.showMenu &&
            <div className={classes.dropdownMenu} >
                    <SideMenuItem label="My Profile" icon={this.renderIcon('person')} onClick={() => this.handleMenuClick("/me")}/>
                    <SideMenuItem label="Settings" icon={this.renderIcon('settings')} />
                    <SideMenuItem label="Logout" icon={this.renderIcon('exit_to_app')} onClick={this.handleSignoutClick}/>
            </div>
        }
    </li>
</div>

SideMenuItem Component

render() {
    const selected = this.props.location.pathname === this.props.path;
    return(
    <ListItem button dense selected={selected} onClick={this.handleOnClick}>
        <ListItemIcon>
            {this.props.open || !this.props.label ? this.props.icon : <Tooltip title={this.props.label}>{this.props.icon}</Tooltip>}
        </ListItemIcon>
        <ListItemText primary={this.props.label}/>
    </ListItem>
    );
}

Answer 1

Hello mate the :hover styling should work in this case. Just try specifying it in a style-sheet instead of inline style.

Sample code

yourCssFile.css

.my-button {
   background-color: yellow;
 }

In your component

import './path_to_css/yourCssFile.css';

In the button

<button class="my-button">Click me</button>

This will apply your styles for your button. Similarly you can try out hover.Check out the reference !