I am coding this front-end with NextJS framework and after the user clicks the target button, a class will be added to a specific div. This class is supposed to change the div style, once I had added unique styles to this class in my css file.
The original element:
<div class="Home_wordBlockWrapper__nwyZO" id="generated-block"><h3>C</h3></div>
The element after clicking the button:
<div class="Home_wordBlockWrapper__nwyZO filled rightindex" id="generated-block"><h3>C</h3></div>
CSS File:
.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;
}
The problem is: Though the class is added, the div style remains the same. Do you guys know where is the error?
Well, I doesn't solved my question with an usual way. But, anyway, my solution was: Instead of trying to add a class to the element and then after stylizing it in the css file, I added a JS script to add the styles in the document element, getting it by its id.
Solution:
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"
}
This way, the issue is solved adding the styles with a JS script, instead of adding a class to its classList and then stylizing it with css files.