CSS Стиль в реакции

Question

Не знаю, почему мой элемент ввода не меняет цвет при наведении

<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

Вы должны задать! Важный флаг при наведении, потому что ваш стиль в элементе реагирования является встроенным, а встроенный стиль не позволяет переопределить любым внешним css

Чтобы сделать это правильным

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

Для большей точности ! Важный не рекомендуется. Вы должны использовать классы для этого.