Czy jest możliwe dodanie niestandardowego koloru hover do podnoszonych przycisków?

Question

Praca nad projektem korzystającym z biblioteki komponentów Material-UI i otrzymałem żądanie niestandardowego koloru wskaźnika przycisku znajdującego się poza normalną konwencją motywu MUI.

Znalazłem odpowiedni blok kodu w źródle podniebionego przycisku, https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98. Ustawienie niestandardowej etykiety Kolor zmienia stan wskaźnika myszy, ale nadal nie spełnia mojej aktualnej potrzeby, aby przycisk najechał na kolor inny niż kolor etykiety.

overlay: { 
    height: buttonHeight, 
    borderRadius: borderRadius, 
    backgroundColor: (state.keyboardFocused || state.hovered) && !disabled && 
    fade(labelColor, amount), 
    transition: transitions.easeOut(), 
    top: 0, 
}, 

Czy istnieje sposób na przesłonięcie koloru tła nakładki w inny sposób, aby można było użyć oddzielnego niestandardowego koloru?

Aby wyjaśnić, chcę to zrobić, korzystając z wbudowanej stylizacji lub poprzez pominięcie podpory na przycisku. Dołączanie klasy i używanie zewnętrznego CSS nie jest opcją.

Answer 1

udało mi się go rozwiązać dając className rekwizyt do RaisedButton komponentu i określając :hover atrybut CSS z dyrektywą !important.

W swojej części:

... 
<RaisedButton className="my-button" /> 
... 

W swojej CSS:

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

Answer 2

można użyć jQuery do klasy i po prostu usunąć addClass

jQuery(document).ready(function($){ 
    $('#test').hover(
    function(){ $(this).addClass('redclass') }, 
    function(){ $(this).removeClass('overlay') } 
    ) 
}); 

„# # # test reprezentują identyfikator i .test reprezentuje klasę elementu, którym próbujesz manipulować.

Answer 3

użyłem window.eventlistener do zdarzenia kliknij aby zastąpić moje nakładek

window.addEventListener("load",addClickHandlers,false); 
function addClickHandlers(event) { 
var someElement = document.getElementById("an_id"); 
someElement.addEventListener("click",myClickHandler,false); 
} 

function myClickHandler(event) { 
... do stuff ... 
} 

Answer 4

Na podniesionym Przycisk ten prop hoverColor więc to będzie coś

<RaisedButton 
    label="Default" 
    hoverColor={"#00ff00"} 
/> 

Answer 5

W funkcji render RaisedButton Obiekt stylu overlay jest zastępowany przez propor overlayStyle. (Odpowiedni fragment znajduje się poniżej).

<div 
    ref="overlay" 
    style={prepareStyles(Object.assign(styles.overlay, overlayStyle))} 
> 
    {enhancedButtonChildren} 
</div> 

Oznacza to, że można ustawić kolor tła, ustawiając backgroundColor z overlayStyle podpory. Myślę, że drugim elementem układanki jest ustawienie zdarzeń onMouseLeave i onMouseEnter i samodzielne zarządzanie bieżącym kolorem tła poprzez zmianę koloru za każdym razem, gdy mysz wchodzi lub opuszcza obszar przycisku.

Niestety, wygląda na to, że zdarzenia skupienia klawiatury nie mają widocznego haka w interfejsie API MaterialUI, więc nie będziesz w stanie obsłużyć tego przypadku bez modyfikowania biblioteki.

To może być coś, co warto przesłać do biblioteki MaterialUI, jeśli przejdziesz przez modyfikację biblioteki.

Answer 6

Dość proste rozwiązanie:

.yourButtonClass{ 
    color: aColor !important; 
    &>span{ 
    color: anotherColor; 
    } 
} 

zastosować kolor do przycisku, który zmienia etykietę i kolor nakładki, a następnie umieścić etykietę w rozpiętości, dla których można określić niezależnie od koloru chcesz tekst być. ten sposób swoją tło, etykieta i nakładki mogą być różne kolory :)

może być także napisany w atrybucie style odpowiednich tagów:

<md-button class="md-raised" style="color: aColor !important"> 
    <span style="color: anotherColor">yourLabel</span> 
</md-button>