如果我为某些组件设置了类名，例如
<Segment className="Change" color='blue' inverted></Segment>
在我的 css 中我使用
.Change:hover{
background-color: black; //or any other change on hover
}
悬停时不会覆盖任何内容。
我还注意到有许多其他组件拒绝我的更改，似乎是随机的。一个语义组件会让我改变宽度，下一个不会。是同一个问题的原因吗？如何覆盖悬停时的颜色？
【问题讨论】：
标签： css reactjs semantic-ui semantic-ui-react
查看 Segment Component (github) 的源代码后，我发现它有两个默认类：segment 和 ui。此外，您使用了两个道具color=blue 和inverted。所以我建议使用以下代码。
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
【讨论】：
选择任何颜色语义-ui 提供例如：
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
您的按钮如下所示：
你可以在 Button 组件中添加倒置的 props 来响应语义 UI 提供
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
您的组件如下所示：
悬停时返回与倒置相反的基本样式
通过反应语义 ui 使用样式化组件
我建议你使用 styled-components 来覆盖语义 UI 组件样式
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
接下来使用你的新样式组件而不是语义用户界面
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
【讨论】：
因为您没有提供更多代码，所以很难猜出您尝试更改的压倒一切的样式。尝试在此样式中添加!importanant 规则。
.Change:hover {
background-color: black !importanant;
}
为了避免!important，这并不总是一个好的解决方案，添加一个更具体的CSS选择器，例如Segment.Change:hover。
更新：
尝试从模板中删除 color='blue' 并检查是否可以使用和不使用 !important 规则。
【讨论】：