CSS Style in React

Question

I don't know why my input element doesn't change color when hovering

<input
                    id='running'
                    className={filterButtonsSytles.button} 
                    style={{backgroundColor: this.state.running  ? 'grey':'white'}} 
                    type="button"
                    value="Bieganie"
                    onClick={(e)=>this.clickHandler(e)}
                />

css

.button {
    border: 1px solid black;
    cursor: pointer;
}

.button:hover {
    background-color: grey;
}

I import import filterButtonsSytles from './filterButtons.module.css'; and in the filterButtons.css have this .button. Hover works when i delete "style={{backgroundColor: this.state.running ? 'grey':'white'}} " — poldeeek
– poldeeek, Commented Feb 15, 2020 at 21:53
But i need "style={{backgroundColor: this.state.running ? 'grey':'white'}} " because this.state.running = true means that this button is active, and false that it isn't — poldeeek
– poldeeek, Commented Feb 15, 2020 at 22:01

DEEPAK · Accepted Answer · 2020-02-15 22:07:53Z

1

You have to give !important flag on hover because your style in in react element is inline style and inline style does not let override by any external css

To make this right

.button:hover {
background-color: grey!important;
}

To make it more precise !important is not recommended . you should be using classes for this.

answered Feb 15, 2020 at 22:07

DEEPAK

1,57415 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Style in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related