Wie funktioniert CSS: Hover-Funktion in JSX?

Question

Hallo und danke für die tolle Arbeit hier. Ich verwende react.js für mein Projekt, um meine Komponenten zu bauen, und ich fühle mich ein bisschen in meinem Projekt gefangen. Ich versuche, einen Knopf mit einer Hover-Funktion zu stylen und ich weiß nicht, wie man das anwendet, um zu reagieren. Hier

ist der Code:

let button = { 
    backgroundColor: colorPalette.white, 
    border: "1px solid rgb(12,106,145)", 
    color: colorPalette.brandCol1, 
    textAlign: 'center', 
    textDecoration: 'none', 
    fontSize : 'inherit', 
    fontWeight : 600, 
    padding : "5px 8px 5px 8px" 
} 

und ich möchte einen Hover-Stil, um es hinzuzufügen, so wie wir mit

button:hover { 
style here....... 
} 

in CSS tun Was ist die korrekte Syntax?

Answer 1

können Sie onMouseEnteronMouseLeave verwenden Sie den Zustand der Komponente

<button 
    onMouseEnter={() => setButtonHovered(true)} 
    onMouseLeave={() => setButtonHovered(false)} 
    className={buttonIsHovered ? 'hover' : null} 
/> 

siehe here für weitere Informationen

oder einfach nur eine css Klasse verwenden, anpassen?

import './style.css' 

<button className="Button"/> 

.Button:hover { 
    ... 
} 

Answer 2

können Sie verwenden:

cost styles = { 
myStyleClassName: { 
     padding: '16px 0px 16px 0px', 
     '& a': { 
      textDecoration: 'none', 
      color: '#0000ee', 
     }, 
     '& a:hover': { 
     textDecoration: 'underline', 
    }, 
}, 
myButtonClass: { 
    '&:hover': { 
     textDecoration: 'underline', 
    },  
}, 

};

....

render() { 
    <span className={myStyleClassName}><a tag><button><someDomObjct></span> 
    <button className={myButtonClass}>my label</button> 
} 

See: http://cssinjs.org/jss-nested/?v=v6.0.1 Die Repo für alles, was nicht notwendig ist, sollte die oben aus dem Kasten heraus arbeiten.