基于获取值的鼠标悬停动态文本颜色失效问题排查

核心问题 #

你代码里用了CSS Modules（从style.categories的写法能看出来），但给Link标签手动加的类名（比如literature）没经过CSS Modules处理——CSS Modules会给所有类名自动加唯一哈希后缀（比如变成literature_xyz789），导致你写的类名和编译后的实际类名对不上，样式当然不生效。

另外补充：就算不用CSS Modules，.categories a的样式优先级和.literature:hover持平，如果CSS里.categories a写在后面，也会覆盖hover样式，但这里主要问题还是CSS Modules的类名匹配。

解决办法 #

办法1：用CSS Modules导出类名（推荐） #

先确保CSS里的分类类名正常定义：

.categories {
  border: 1px solid #000;
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  text-align: center;
  list-style: none;
}

.categories li {
  display: inline-block;
  margin: 0 20px;
}

.categories a {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
}

.literature:hover {
  color: blue;
  text-decoration: underline;
}

/* 其他分类样式同理 */
.science:hover {
  color: green;
}

然后在TSX里通过style对象引用这些类名，同时处理TS类型报错：

<ul className={`${style.categories} ${poppins.className}`}>
    {unique_categories.map((category) => {
        // 转小写后匹配style里的类名，类型断言避免TS报错
        const categoryClass = style[category.toLowerCase() as keyof typeof style];
        return (
            <li key={category.id}>
                <Link
                    href={`${category}`.toLowerCase()}
                    className={categoryClass}>
                    {category}
                </Link>
            </li>
        )
    })}
</ul>

办法2：用全局样式（不推荐） #

如果不想让CSS Modules处理这些分类类名，在CSS里用:global()包裹类名，让它保持原生：

:global(.literature:hover) {
  color: blue;
  text-decoration: underline;
}

这样TSX里原来的className={${category}.toLowerCase()}就能直接匹配样式，但全局类名容易和其他代码冲突，尽量少用。

办法3：提升选择器优先级（优化细节） #

如果之后还是出现样式被覆盖的情况，可以加强选择器优先级，去掉!important：

.categories a.literature:hover {
  color: blue;
  text-decoration: underline;
}

这个选择器的优先级比.categories a更高，能确保hover样式生效。

内容的提问来源于stack exchange，提问作者Norah Jones