如何在next js中的一个div中添加2个classname？

goucqfw6 于 2023-05-28 发布在其他

关注(0)|答案(3)|浏览(217)

我尝试添加两个classname表单样式，但我无法在一个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;
}

next.js

来源：https://stackoverflow.com/questions/72066423/how-can-you-add-2-classname-in-a-single-div-in-next-js

3条答案

按热度按时间

tcomlyy61#

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

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

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

查看this以了解更多上下文

赞(0）回复(0）举报 2023-05-28

ruarlubt2#

兄弟，你可以使用class="“和className="“为同一个div如果你再次遇到这个问题，你可以尝试这个片段：${styles.card} ${styles.canclick}这里你的代码和这个代码的区别是我的代码有**``和你的代码有''**在开始和结束。你可以看到这个符号在上面的“标签”按钮你的键盘。只要点击那一个和享受。

赞(0）回复(0）举报 2023-05-28

brjng4g33#

你应该试着像这样添加你的className。
单引号不能正确地添加className，因此您可以使用模板文字，如下所示：