Warunkowy styl CSS React

Question

Witam, napisałem CSS, w którym po najechaniu na przycisk kolor powinien się zmienić na szary, ale jednocześnie w stylu inline warunkowo generuje tło tego przycisku w zależności czy jest aktywny czy nie. Takie połączenie jednak gryzie się ze sobą i hover nie działa...
 

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

 

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

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

 

Answer 1

Trzeba dać 

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

 

Comments

To zadziała jednak jest to bardzo złe rozwiązanie. Ja bym jednak polecił dodać klase do przycisku i zmieniać klasy w JSX zamiast styli.

 

<input
          id='running'
         className={`${filterButtonsSytles.button} ${filterButtonsSytles[this.state.running  ? 'button--running':'button--no-running']}`} 
         type="button"
         value="Bieganie"
         onClick={(e)=>this.clickHandler(e)}
/>

a następnie w CSS robisz sobie kolory które miałeś w JSX

 

.button {
    border: 1px solid black;
    cursor: pointer;
    background-color: white;
}
.button--running {
   background-color: grey;
}
.button:hover {
    background-color: grey;
}

Polecam używać BEMa :) 

https://budzis.pl/Wpisy/Kursy/Optymalizacja-stron/Metodologia-BEM/