如何在下一个 js 中的单个 div 中添加 2 个类名？

Question

我尝试添加两个类名表单样式，但无法在单个 div.

中添加两个 CSS 类

截图如下：

我的代码如下：

blog.js

...
import styles from '../styles/Home.module.css'
....
    <div className={styles.container}>
        <h2 >Recent Blogs</h2>
        <hr/>
        {blogs.map((data)=>{
          return <div key={data.slug}>
          <div className={'${styles.card} ${styles.canclick}'}>
          <Link href={`blogpost/${data.slug}`}><h3>{data.title}</h3>
          </Link>
          <em>{data.author}</em>
          </div>
          <p>{data.content.substr(0,200)}</p>
          </div>

Home.module.css

.canclick{ 
cursor: pointer; 
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  max-width: 300px;
}

Answer 1

您需要对模板字符串使用反引号，而不是使用单引号：

// This works
`${styles.card} ${styles.canclick}`

// This won't work
'${styles.card} ${styles.canclick}'

查看this了解更多背景信息

Answer 2

兄弟，你可以使用 class="" 和 className="" 相同的 div 如果你再次遇到这个问题，你可以输入这个片段： ${styles.card} ${styles.canclick} 这里你的代码和这个代码之间的区别是我的代码有 `` 而你的代码有 **''** 在开始和结束。您可以在 keyboard.just 的“制表符”按钮上方看到此符号，单击并享受。

如何在下一个 js 中的单个 div 中添加 2 个类名？

How can you add 2 classname in a single div in next js?

javascript

css

reactjs

next.js