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;
}

Answer 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.