Hello, I'm having trouble with applying a className based on database values and using it in CSS for custom hover color. Can anyone assist me? 🙏
For example, if the category is 'Literature' --> it should be displayed as 'literature' in lowercase. The class is assigned correctly when inspected, but the content of the class is not displaying properly:
https://i.sstatic.net/1ufW6j3L.png
Snippet from the TSX file:
<ul className={`${style.categories} ${poppins.className}`}>
{unique_categories.map((category) => (
<li key={category.id}>
<Link
href={`${category}`.toLowerCase()}
className={`${category}`.toLowerCase()}>
{category}
</Link>
</li>
))}
</ul>
CSS part:
.categories {
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 0;
width: 100%;
text-align: left;
list-style: none;
padding: 10px;
text-align: center;
}
.categories li {
display: inline-block;
margin: 0px 20px 0px;
}
.categories a {
color: rgb(0, 0, 0);
text-decoration: none;
text-transform: uppercase;
}
.literature:hover {
color: blue !important;
text-decoration: underline !important;
}