如何为 CSS 模块应用条件？

问题描述

我在 React 项目中使用 CSS 模块。我只想为项目中的一个组件应用条件类名。我该怎么做？

import classes from "./Header.module.css"

我想在这里申请

<ul className={click ? "nav-menu active" : "nav-menu"}>

解决方法

问题

您错误地访问了 class 名称。

解决方案

像对象一样使用它。

<ul className={ classes.nav-menu + ' ' + ( click ? classes.active : '' ) }>

,

你需要做什么：-

<ul className={click ? classes['nav-menu-active'] : classes['nav-menu']}>

为什么是上面的？

因为 classes 是一个对象。

虽然为了干净的代码，请使用 clsx 包并使用 .active 而不是 nav-menu-active 像这样：-

<ul className={clsx(classes['nav-menu'],click && classes.active)}>

clsx 允许轻松分组类名并从 DOM 中删除虚假值，并且您不会在类名中看到悬空的 undefined、null 或 false。