Semantic UI React中覆盖Menu inverted样式，设置指定a标签为黑色

嘿，我完全懂你被样式优先级拿捏的头疼——Semantic UI的默认样式确实经常因为选择器特异性压过自定义样式，尤其是inverted模式下的Menu组件。咱们一步步拆解解决：

先修复一个基础bug：重复ID的问题 #

你给多个<a>标签用了同一个id="hii"，但HTML规范里ID必须是唯一的，这就是为什么只有第一个<a>生效的核心原因。赶紧把这些ID换成class，比如class="custom-black-link"，这样就能安全复用样式了。

精准定位目标链接，避开图标变色坑 #

你之前用div {color: black !important}会把图标也变黑，是因为<i>标签会继承父div的颜色。咱们直接给需要变色的<a>标签单独加样式，别碰父元素就能避开这个问题。

方法1：用高特异性选择器（推荐，无需!important） #

Semantic UI的Inverted Menu生成的DOM结构大概是：.ui.inverted.menu → .item → .dropdown → .menu → .item → <a>。咱们可以利用这些层级写优先级更高的选择器：

先修改你的JSX，给需要变黑的<a>加专属class：

<Menu.Item>
  <Dropdown item text={<i class="user outline icon" />} direction="left">
    <Dropdown.Menu>
      {isAuthenticated ? (
        <div>
          <Dropdown.Item>
            <a class="custom-black-link"> Let's welcome {username}! </a>
          </Dropdown.Item>
          <a class="custom-black-link" onClick={this.travelToProfile}>
            <Dropdown.Item>Profile! (in development)</Dropdown.Item>
          </a>
          <a class="custom-black-link" onClick={this.travelToSavedRoadmaps} >
            <Dropdown.Item> View saved roadmaps (in development) </Dropdown.Item>
          </a>
          <a onClick={this.logOutClick}>
            <Dropdown.Item>Logout!</Dropdown.Item>
          </a>
        </div>
      ) : (
        <Dropdown.Item href="/login">
          <a>Please Log In</a>
        </Dropdown.Item>
      )}
    </Dropdown.Menu>
  </Dropdown>
</Menu.Item>

然后写对应的CSS：

/* 精准匹配Inverted菜单内的自定义黑色链接，优先级超过Semantic默认样式 */
.ui.inverted.menu .dropdown .menu .item .custom-black-link {
  color: #000;
}

如果不确定层级，直接用浏览器F12打开开发者工具，找到目标<a>标签，看它的父元素都带哪些类，把这些类拼进选择器里就行——选择器越具体，优先级越高。

方法2：必要时用!important（尽量少用） #

如果你嫌写长选择器麻烦，也可以用!important，但一定要确保只作用在目标链接上：

.custom-black-link {
  color: #000 !important;
}

这个方法简单直接，但要注意别给全局元素加，必须给目标<a>单独加class，避免误改其他样式。

为什么之前的a {color: black!important}没效果？ #

因为Semantic UI的样式选择器比单纯的a更具体，比如它可能是.ui.inverted.menu .item a，这种带父类的选择器优先级远高于单纯的a，哪怕你加了!important，Semantic如果也用了!important（部分组件会这么做），还是会覆盖你的样式。所以用高特异性选择器才是根本解决思路。

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