title: Change styling on hover semantic-ui-react components
body: <p>if I set up a className for certain components like</p>
  
  <pre><code>&lt;Segment className="Change" color='blue' inverted&gt;&lt;/Segment&gt;
  </code></pre>
  
  <p>and in my css I use </p>
  
  <pre><code>.Change:hover{
    background-color: black; //or any other change on hover
  }
  </code></pre>
  
  <p>nothing is overriden on the hover.  </p>
  
  <p>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?</p>