I am not sure why applying className based on the value fetched from the database and then using this value in css for custom color on hover doesn't work. Could you help? 🙏

Part of 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>

Part of the css file:

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