css - 带有三元运算符的顺风

问题描述

我正在使用 React 开发一个项目，并使用 Tailwind 作为我的 CSS。

我有一个侧边栏，当用户仅在单击汉堡菜单时登陆时，它实际上不应该出现在登陆页面中。目前，当用户登陆时就会出现这种情况，并且看起来有点有趣。我认为这可能与顺风无法识别active三元运算符中的类这一事实有关。

我的代码：

import React, {useState} from 'react';
import {Link} from 'react-router-dom';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import {SidebarData} from './SidebarData';


function Navbar() {

    const [sidebar,setSidebar] = useState(false)

    const showSidebar =() => setSidebar(!sidebar)

    return(
        <>
            <div className="navbar flex bg-white text-black h-12 justify-start items-center m-0 p-0  ">
                <Link to ="#" className="menu-bars ml-8 text-4xl bg-none">
                    <FaIcons.FaBars onClick={showSidebar}/>
                </Link>
            </div>
            <nav className={sidebar ? 'nav-menu active left-0 transition duration-250 ' : 'nav-menu bg-white w-1/4 h-screen flex justify-center fixed top-0 -left-100 transition duration-1000'}>
                <ul className="nav-menu-items w-full " onClick={showSidebar}>
                    <li className="navbar-toggle w-full h-5 flex justify-start items-center">
                        <Link to='#' className="menu-bars flex justify-start items-center pt-8 pr-0 pb-10 list-none h-1">
                        <AiIcons.AiOutlineClose/>
                        </Link>
                    </li>
                    {SidebarData.map((item,index) =>{
                        return (
                            <li key={index} className="{item.cName}">
                                <Link to={item.path} className="text w-11/12 h-full flex items-center pt-0 pb-1 border">
                                    {item.icon} 
                                  <span className="ml-1">{item.title}</span>
                                </Link>
                            </li>
                        )
                    })}
                </ul>
            </nav>
        </>
    );
}

它的样子：

当你着陆时它应该是什么样子：

点击汉堡菜单后：

这个是黑色的，但你明白了。这是完全不同的。

感谢所有帮助，谢谢！

标签： cssreactjstailwind-css

css - 带有三元运算符的顺风 - 活动与非活动类

问题描述

解决方案

推荐阅读