Material-UI FAB Hover Color

Question

Ich habe eine Floating-Aktion-Taste, die ein SVG-Symbol darunter geschachtelt hat, obwohl es nicht in der Child-Requisite des FAB ist. Immer wenn der Mauszeiger über das FAB/SVG-Symbol bewegt wird, ändert sich der FAB in ein helles Grau. Ich schaute auf https://github.com/callemall/material-ui/issues/894 und ein paar andere Quellen und fand heraus, dass die Hover-Farbe 40% der SVG-Symbolfarbe ist.

Ist es möglich, entweder die Hover-Funktion zu entfernen, so dass keine Farbänderung stattfindet, oder ist es möglich, die Farbe zu ändern, die der Schwebeflug erzeugt, um mit der von meinem FAB übereinzustimmen?

Mein Ziel ist es, dass Benutzer ihre Maus den FAB/SVG-Symbolbereich betreten und verlassen können und keine Farbänderung haben.

Hier ist ein Ausschnitt aus dem Code mit Ich arbeite:

<FloatingActionButton secondary={true} onTouchTap={this.printHandleOpen.bind(this)}> 
    <ActionPrint style={styles.actionIcon}/> // This is the SVG icon, setting hoverColor doesn't seem to have any result 
    <Dialog 
    ... 

Answer 1

die Hover-Farbe ändern würde der Animationseffekt auch dazu führen, ein bisschen flippig zu sein. Ich denke nicht, dass ich empfehlen würde, einen zu modifizieren, ohne mit dem anderen zu spielen.

Wenn du diese Route gehen willst, änderst du genug, dass es nicht mehr der Material-ui-Floating-Aktionsknopf ist. Was gut ist, aber diese Tatsache umarmen. Nehmen Sie den FAB-Code (hier gefunden: https://github.com/callemall/material-ui/blob/master/src/FloatingActionButton/FloatingActionButton.js) und optimieren Sie ihn nach Herzenslust, um ihn zu Ihrem eigenen zu machen.

Wenn Sie jedoch alle interaktiven Aspekte der Schaltfläche entfernen möchten, würde ich stattdessen vorschlagen, nur ein kreisförmiges Papierelement (http://www.material-ui.com/#/components/paper) zu verwenden. Es unterstützt onClick und jede Hintergrundfarbe gut.