我正在用语义ui react构建我的东西,我认为它比我的其他CSS优先。在<Menu ....... inverted>
将文本设置为白色之后,我尝试将文本设置为黑色。
这是我的代码Menu.Item位于一个名为“ inverted”的菜单中,它将使组件内的所有内容变为相反的颜色。因此,我认为我正在尝试的许多事情都没有效果。
<Menu.Item>
<Dropdown item text=<i class="user outline icon" /> direction="left">
<Dropdown.Menu>
{isAuthenticated ? (
<div class="hiiii">
<Dropdown.Item>
<a id="hii" color="white">
Let's welcome {username}!
</a>
</Dropdown.Item>
<a id="hii" color="white" onClick={this.travelToProfile}>
<Dropdown.Item>Profile! (in development)</Dropdown.Item>
</a>
<a
id="hii"
color="black"
onClick={this.travelToSavedRoadmaps}
>
<Dropdown.Item>
View saved roadmaps (in development)
</Dropdown.Item>
</a>
<a id="hii" onClick={this.logOutClick}>
<Dropdown.Item>Logout!</Dropdown.Item>
</a>
</div>
) : (
<Dropdown.Item href="/login">
<a id="hii">Please Log In</a>
</Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
</Menu.Item>
我在一些<a/>
之后放了一个颜色attr,目的只是为了测试一下。经过多次测试,我发现一些有趣的事情:如果我这样做
#hii {
color: black;
}
第一个ID为hii的a会变成黑色,其余的则不会。起作用的东西是div {color: black !important}
,但这也会使<i class="user outline icon"/>
变黑。因此,我试图仅选择那些标签并使它们变黑。我没有a {color: black!important}
的运气。谢谢,抱歉,如果我没有道理,该死的是凌晨2:46!