next.js：如何使用 className（CSS 组件模块）答案

【问题标题】：next.js: How to work with className (CSS components modules)next.js：如何使用 className（CSS 组件模块）
【发布时间】：2021-10-10 17:12:06
【问题描述】：

我正在发现 Next.JS，并且我正在努力处理使用 .js 文件中的 html 代码中的组件 css 模块产生的语法。

我看过的一个教程解释说：

<a className="btn"</a>

使用 css 模块类将变为以下内容。

<a className={classes.btn}</a>

但是我对如何处理以下事情感到困惑：

<a className='navbar-logo fab fa-typo3' onClick={closeMobileMenu}>Home</a>

或

<i className={click ? 'fas fa-times' : 'fas fa-bars'} />

我找不到一种方法来学习如何正确编写类名内容，而类无处。欢迎帮助！

【问题讨论】：

【解决方案1】：

如果您使用的是 CSS 模块，请尝试使用模板字符串。

<a className={`${classes.navbar-logo} ${classes.fab} ${classes.fa-typo3}`} onClick={closeMobileMenu}>Home</a>

【讨论】：

classes.navbar-logo、classes.fa-typo3 将不起作用。在这种情况下，需要使用类似数组的表示法来访问键，例如classes['navbar-logo']。