我試圖添加兩個(gè)classname表單樣式，但是我不能在一個(gè)div中添加兩個(gè)CSS類。

下面是截圖:

我的代碼如下:

博客. 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;
}

您需要對(duì)模板字符串使用反引號(hào)，而不是使用單引號(hào):

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

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

更多的上下文請(qǐng)看這個(gè)

老弟你可以用class = & quot"并且className = & quot"對(duì)于相同的分區(qū) 如果你再次遇到這個(gè)問題，你可以試試這個(gè)片段: $ { styles . card } $ { styles . can click } 這里你的代碼和這段代碼的區(qū)別是 我的代碼有``而你的代碼有* * ' ' * *在開頭和結(jié)尾。 你可以在上面看到這個(gè)符號(hào)& quottab & quot只需點(diǎn)擊那個(gè)按鈕就可以享受了。

您應(yīng)該嘗試像這樣添加您的類名。

單引號(hào)不會(huì)正確地添加類名，為此，您可以使用模板文字，如下所示:

${styles.card} ${styles.canclick}