Change styling on hover semantic-ui-react components

Question

if I set up a className for certain components like

and in my

Answer 1

After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.

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

Working DEMO

Answer 2

Choose any color semantic-ui provide for example:

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

Your button appears like:

You can add inverted props inside Button component that react semantic-ui provide

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

your component appears like:

On hover returns to basic style opposite of inverted

styled components usage with react semantic ui

I recommended you to use styled-components in order to override semantic-ui component style

import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";

const Mybutton = styled(Button)`
 &:hover {
    color: #fff !important;
 }
`;

Next use your new styled component instead of semantic-ui

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

Answer 3

Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.

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

To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.

UPDATE: Try to remove color='blue' from the template and check if will work with and without !important rule.