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

Posted 2023-02-22

【中文标题】next.js：如何使用 className（CSS 组件模块）

【英文标题】：next.js: How to work with className (CSS components modules)

【发布时间】：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' />

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

【问题讨论】：

这能回答你的问题吗？ using css modules how do I define more than one style name

【参考方案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']。