如果我为某些组件设置了一个类名，比如
<Segment className="Change" color='blue' inverted></Segment>
在我的 css 中我使用
.Change:hover{
background-color: black; //or any other change on hover
}
悬停时没有任何内容被覆盖。
我还注意到有许多其他组件拒绝我的更改，似乎是随机的。一个语义组件会让我改变宽度，而下一个则不会。是同一个问题的原因吗？如何覆盖悬停时的颜色？
选择任何颜色语义用户界面提供例如：
<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>
您的组件看起来像：
悬停时返回与倒置相反的基本样式
使用 React 语义 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规则。