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样式的Hello mate应该起作用。只需尝试在样式表而非内联样式中指定它即可。

示例代码

yourCssFile.css

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

在您的组件中

import './path_to_css/yourCssFile.css';

在按钮中

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

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

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

1 个答案: