Change Styling on Hover Semantic-Ui-React Components

Change styling on hover semantic-ui-react components

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

React Semantic Ui Button hover

Maybe your path to element is invalid, check my snippet:

https://codepen.io/anon/pen/QVQjMY

const {  Button,  Container,  Divider,  Header,  Icon,  Message,} = semanticUIReact
class App extends React.Component {  render() {    return (      <Button.Group vertical className="ui black change">          <Button>            <Icon name="minus" color="white" />          </Button>          <Button className="btn">            <Icon name="minus" color="white" />          </Button>          <Button>            <Icon name="minus" color="white" />          </Button>        </Button.Group>    )  }}
// ----------------------------------------// Render// ----------------------------------------const mountNode = document.createElement('div')document.body.appendChild(mountNode)
ReactDOM.render(<App />, mountNode)

body {  background-color: red;}
.ui.black.change button:hover{  background-color: teal!important;}

Overriding styles in semantic ui react

Specificity is king. Only time would need to use !important would be when inline style is present and the library does not expose a way to toggle the property off in some way (poor architecture choice).

The following list of selector types increases by specificity:

Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).

ID selectors (e.g.,
#example).

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Take a look at the first UI Button for Semantic UI here, is comprised of the following HTML:

<button class="ui button">Click Here</button>

CSS is attached via semantic.min.css:

.ui.button {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #e0e1e2 none;
    color: rgba(0,0,0,.6);
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em .78571429em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

To override say, the font color, all we have to do is write a selector that is more specific than this selector. We can achieve this by combining their two class selectors (equally specific) with a type selector (additional specificity).

This would look like:

button.ui.button {
  color: red;
}

Now since button.ui.button is more specific in describing the location of the element in the page (DOM), than say just .ui.button, this signals to the browser that this style should override the previous declaration. This is a common way to customize a theme.

Great docs here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS

.ui.button {    cursor: pointer;    display: inline-block;    min-height: 1em;    outline: 0;    border: none;    vertical-align: baseline;    background: #e0e1e2 none;    color: rgba(0,0,0,.6);    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;    margin: 0 .25em 0 0;    padding: .78571429em 1.5em .78571429em;    text-transform: none;    text-shadow: none;    font-weight: 700;    line-height: 1em;    font-style: normal;    text-align: center;    text-decoration: none;    border-radius: .28571429rem;    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;    will-change: '';    -webkit-tap-highlight-color: transparent;}
button.ui.button {  color: red;}

<button class="ui button">Click Here</button>

React Semantic UI and a custom CSS class

I believe you practically answered your own question, in semantic.css that Semantic UI uses file class combination
.ui.label has a predefined color rgb(0,0,0,.6) - these are the classes React element Label uses.

Since .ui.label is more specific than .test (2 classes vs 1 class, here is an amazing infographic about this: http://www.standardista.com/css3/css-specificity/), the color parameter of the first class trumps the second color parameter.

I tried this with Semantic UI and without React and the same result occurred.

.test {
   color: red;
}

<div class="ui label test">not a color red</div>

How can i hover in React using useState

You are using the setter instead of the state itself on your condition. Change isHover with hover like below:

const showIcons = hover ? "Show" : "";

---

Related Topics