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

Question

我正在做一个项目与React和使用尾风作为我的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>
        </>
    );
}

它看起来像什么：

​

​

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

​

​

单击burger菜单后：

​

​

这一张是黑色的，但你可以看到照片。这是完全不同的。

非常感谢您的帮助，谢谢！

Answer 1

请确保为活动类正确配置了顺风配置文件，并查看本教程here