Блог

Я хочу реализовать компонент, подобный панели навигации, в reactjs. но классы pesudo (: hover) для css, похоже, не поддерживаются react (css-in-js). Я пробую другой способ решить проблему, используя li и state control.

Другая проблема для этого решения заключается в том, что я не могу удалить неупорядоченный маркированный список, используя display:inline-block or list-style:none , потому что это приводит к исчезновению элементов подменю при наведении на них моего указателя.Я использую material-ui / core в качестве библиотеки пользовательского интерфейса

Пример моего кода:

 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 amp;amp;
            <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>
    );
}
  

Привет, приятель, в этом случае стиль наведения должен работать. Просто попробуйте указать его в таблице стилей вместо встроенного стиля.

Пример кода

yourCssFile.css

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

В вашем компоненте

 import './path_to_css/yourCssFile.css';
  

В кнопке

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

Это применит ваши стили для вашей кнопки. Аналогичным образом вы можете попробовать hover.Проверьте ссылку!