javascript - 导航菜单列表(子菜单)下拉列表在 reactjs 中不起作用

Question

我想在 reactjs 中实现一个类似导航栏的组件。但是 react(css-in-js) 似乎不支持 css 的 pesudo-classes(:hover)。我尝试另一种方法来使用 li 和状态控制来解决问题。

此解决方案的另一个问题是我无法使用 display:inline-block 或 list-style:none 删除无序的元素符号列表，因为它使将指针向下移动到子菜单项时它们会消失。我正在使用 material-ui/core 作为 UI 库

我的代码示例:

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 组件

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

你好伙计， :hover 样式应该适用于这种情况。只需尝试在样式表中指定它而不是内联样式。

示例代码

你的 CssFile.css

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

在你的组件中

import './path_to_css/yourCssFile.css';

在按钮中

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

这将为您的按钮应用您的样式。同样，您可以尝试悬停。查看 reference !