NextJS 在添加新类后没有对 div 进行样式化答案

【问题标题】：NextJS is not stylizing div after adding new classNextJS 在添加新类后没有对 div 进行样式化
【发布时间】：2022-01-30 10:06:24
【问题描述】：

我正在用 NextJS 框架编写这个前端，在用户点击目标按钮后，一个类将被添加到特定的 div 中。一旦我在我的 css 文件中为这个类添加了独特的样式，这个类就应该改变 div 样式。

原始元素：

<div class="Home_wordBlockWrapper__nwyZO" id="generated-block"><h3>C</h3></div>

点击按钮后的元素：

<div class="Home_wordBlockWrapper__nwyZO filled rightindex" id="generated-block"><h3>C</h3></div>

CSS 文件：

.wordBlockWrapper {
  border: 2px solid rgb(226, 232, 240); 
  border-radius: 5px;
  width: 50px;
  height: 50px;
}

.wordBlockWrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  transition: .5 ease-in-out;
}

.filled {
  border: 2px solid black;
}

问题是：虽然添加了类，但 div 样式保持不变。你们知道错误在哪里吗？

【问题讨论】：

我可以看到你的CSS有两个.wordBlockWrapper
我将这两个元素合二为一。但是，我仍然有问题
您能告诉我们您是如何将类添加到元素中的吗？看起来您正在添加一个全局 CSS 类，而不是作用域 CSS 模块类。

标签： javascript html jquery css next.js

【解决方案1】：

嗯，我没有用通常的方式解决我的问题。但是，无论如何，我的解决方案是：我没有尝试向元素添加一个类，然后在 css 文件中对其进行样式化之后，而是添加了一个 JS 脚本来在文档元素中添加样式，并通过其 id 获取它。

解决方案：

var tb = document.getElementsByClassName(styles.wordBlockWrapper)[matching.index]
var targBlockId = document.getElementById(tb.id);
  
if(targBlockId !== null) {
    targBlockId.style.backgroundColor = "#13d178"
    targBlockId.style.color = "#fff"
}

这样就解决了使用 JS 脚本添加样式的问题，而不是在其 classList 中添加一个类，然后使用 css 文件对其进行样式化。

【讨论】：