5

if I set up a className for certain components like

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

and in my css I use 

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

nothing is overriden on the hover.

I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?

DORRITO
  • 621
  • 2
  • 8
  • 25

3 Answers3

4

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

fyasir
  • 2,924
  • 2
  • 23
  • 36
  • 1
    Darn, I had tried a couple things similar to this, so thought this might work, but it's a no go. Such a simple change that works easily on a div makes me think I shouldn't be using semantic in this case. – DORRITO Feb 17 '18 at 15:19
  • I edited my answer with !important. have you tried it too? – fyasir Feb 17 '18 at 15:21
  • Your demo helped! Caveat: I cannot use the react version of semantic ui for this. I can use it for text changes, but not the background color. (with a a simple .Change:hover) I am voting your result as the answer because although it doesn't fix the React version issue, and i have to use normal semantic code, it is a workaround that works! Thanks. – DORRITO Feb 17 '18 at 15:44
  • 1
    I had already been using !important, yes. switching to the
    and away from a semantic react component worked.
     – DORRITO Feb 17 '18 at 15:46
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:

enter image description here

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:

enter image description here

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>
xargr
  • 2,788
  • 1
  • 19
  • 28
0

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.

mpro
  • 14,302
  • 5
  • 28
  • 43
  • I have tried important, doesn't work unfortunately. The code showed is all that is on the page. The rest would be import statements and react rendering. Just trying to change the color (or do anything on hover) of styling from semantic-ui-react. – DORRITO Feb 17 '18 at 15:15