在悬停语义 - 反应组件上更改样式

Question

如果我为某些组件设置了className，例如

<Segment className="Change" color='blue' inverted></Segment>

在我的CSS中我使用

.Change:hover{
  background-color: black; //or any other change on hover
}

悬停时没有覆盖任何内容。

我还注意到还有许多其他组件拒绝我的变化，看似随意。一个语义组件将让我改变下一个不会的宽度。原因是同一个问题吗？如何覆盖悬停时的颜色？

Answer 1

在审核了细分受众群的源代码（github）之后，我发现它有两个默认类：segment和ui。此外，您使用了两个道具color=blue和inverted。所以我建议使用以下代码。

.ui.segment.blue.inverted.Change:hover {
  background-color: black !important;
}

Working DEMO

Answer 2

例如，选择任何颜色语义用户界面提供的内容

<Form>
      <Form.Input label="Email" type="email" />
      <Form.Input label="Password" type="password" />
      <Button color="teal" type="submit">
        Sign In
      </Button>
</Form>

您的按钮显示为：

您可以在Button组件内添加反义道具，以响应语义用户界面提供的内容

<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;
 }
`;

接下来，使用新样式的组件代替语义UI

<Mybutton inverted color="teal" type="submit">
   Sign In
</Mybutton>

Answer 3

因为您没有提供更多代码，所以很难猜出您尝试更改的覆盖样式。尝试将!importanant规则添加到此样式。

.Change:hover {
  background-color: black !importanant;
}

要避免!important，这不是一个好的解决方案，请为Segment.Change:hover添加更具体的CSS选择器。

更新： 尝试从模板中删除color='blue'，然后检查是否可以使用!important规则。