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

Question

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

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

在我的CSS中我使用

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

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

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

Answer 1

在查看Segment Component（ github ）的源代码之后，我发现它有两个默认类： segment和ui 。 另外，你使用了两个道具color=blue和inverted 。 所以我建议使用以下代码。

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

工作演示

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组件中添加反向语义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来设计组件的用法

我建议你使用样式组件来覆盖语义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 ，这并不总是一个好的解决方案，添加一个更具体的CSS选择器，用于实现Segment.Change:hover 。

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