如何申请 CSS Modules 的条件？答案

【问题标题】：How to apply conditions for CSS Modules?如何申请 CSS Modules 的条件？
【发布时间】：2021-04-28 23:01:23
【问题描述】：

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

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

我想在这里申请

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

【问题讨论】：

【解决方案1】：

问题

您访问的 class 名称不正确。

像对象一样使用它。

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

【讨论】：

【解决方案2】：

你必须做什么：-

<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。

【讨论】：