Change styling on hover semantic-ui-react components

css reactjs semantic-ui semantic-ui-react
DORRITO picture DORRITO · Feb 17, 2018 · Viewed 11.7k times · Source

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?

Answer

fyasir picture fyasir · Feb 17, 2018

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

Related questions

Semantic UI (React): Responsive vertical menu by changing to horizontal on mobile devices

I am using a vertical menu (semantic ui react). This is my structure for that: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit'> <a className='item'&…

Read More
React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More