How to do CSS：JSXのホバー機能？

Question

こんにちは、偉大な仕事のおかげでここに。私は自分のコンポーネントをビルドするために私のプロジェクトにreact.jsを使用していますが、今私のプロジェクトでちょっとしたことがあります。私は、ホバー機能を備えたボタンのスタイルを設定しようとしており、これをどのように反応させるべきかわかりません。

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" 
} 

と私たちは正しい構文で何

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

とCSSで行うと同じように、それにホバースタイルを追加したいと思います：ここで

は、コードのですか？

Answer 1

あなたは

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

は、より多くの情報

またはちょうどcssクラスを使用するためhereを参照されたコンポーネントの状態を調整するためにonMouseEnteronMouseLeaveを使用することができますか？

を使用でき

import './style.css' 

<button className="Button"/> 

.Button:hover { 
    ... 
} 

Answer 2

：

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> 
} 

参照：http://cssinjs.org/jss-nested/?v=v6.0.1 レポはすべてのための必要はありませんが、上記のボックスの外に動作するはずです。