如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加啥

Posted 2023-03-16

【中文标题】如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加啥

【英文标题】：what do I put in className if I am using CSS module with .active property如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加什么

【发布时间】：2021-10-18 19:05:38

【问题描述】：

每当我在导航栏中的状态发生变化时，我希望 NavItems 的背景在它为 false 时是透明的，并在它为 true 时添加渐变背景。

我知道如果是普通的 CSS，我可以将 'NavItems active' 作为我的 className 和 ?operator 用于 if 语句，但是我该如何使用 CSS 模块呢？

index.module.css

.NavItems
    background: transparent !important;
    height: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-weight: bold;
    position: sticky;
    top:0;
    z-index:300;


.NavItems.active
    background: linear-gradient(90deg, rgb(61,49,49) 0%, rgba(49,49,49,1)100%) !important;

index.jsx

return (
            <nav className=navbar ? styles.active : styles.NavItems>
                <div> 
                    <Link to='/'>
                    <img className=styles.NavLogo src=logo alt='LaoMa Logo'/>
                    </Link>
                </div>
                <div className=styles.menu_icon onClick=handleClick>
                    <i className=click ? 'fas fa-times' : 'fas fa-bars'>
                    </i>
                </div>
                <ul className=click ? styles.nav_menu.active : styles.nav_menu>
                    NavItems.map((item, index)=> 
                        return (
                            <li key=index>
                                    <Link onClick=closeMobileMenu className=styles[item.cName] to=item.url>
                                        item.title
                                    </Link>
                            </li>
                        )
                    )
                </ul>
            </nav>

        );                   

【参考方案1】：

编辑：正如 andy 所说，我提供的第一个解决方案可能会导致奇怪的错误，因此使用像 https://www.npmjs.com/package/clsx 这样的包更聪明（就像 debuchet 建议的那样）

第一个解决方案：

className=`$navbar && styles.active $styles.NavItems`

然后在你的 css 中

.NavItems
    background: transparent !important;
    height: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-weight: bold;
    position: sticky;
    top:0;
    z-index:300;


.active 
    background: linear-gradient(90deg, rgb(61,49,49) 0%, rgba(49,49,49,1)100%) !important;

【讨论】：

那行不通。你的意思是navbar 而不是active 这里的className=`$active && styles.active $styles.NavItems`？我使用钩子将状态设置为真或假，具体取决于值window.scrollY

是的，对不起，我更新了。现在可以用了吗？

这应该对你有很大帮助:) npmjs.com/package/clsx

使用&& 的问题是它会返回一个值，该值最终可以作为类名添加，请参阅此处了解更多***.com/questions/50377147/…，因此虽然它“有效”，但它也可以导致到奇怪的错误

@andymccullough 不知道，谢谢