更改悬停语义-ui-反应组件的样式

Question

如果我为某些组件设置类名，例如

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

在我的 css 中我使用

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

悬停时不会覆盖任何内容。

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

Answer 1

因为您没有提供更多代码，所以很难猜出您尝试更改的主要样式。尝试为该样式添加 !importanant 规则。

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

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

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

Answer 2

查看Segment Component(github)的源码后，发现它默认有两个类：segment和ui。此外，您使用了两个道具 color=blue 和 inverted。所以我建议使用下面的代码。

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

Working DEMO

Answer 3

选择任何颜色语义-ui 提供例如：

<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>

您的组件看起来像：

悬停时 returns 到与 inverted

相反的基本样式

带反应语义的样式化组件用法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>

更改悬停语义-ui-反应组件的样式

Change styling on hover semantic-ui-react components

css

reactjs

semantic-ui

semantic-ui-react