☰

JSXでCSS :hover関数を実行するにはどうすればいいですか? 質問する

tag-icon • tag-icon reactjs jsx
JSXでCSS :hover関数を実行するにはどうすればいいですか? 質問する

こんにちは。素晴らしい仕事をありがとうございます。私は自分のプロジェクトでコンポーネントを構築するために react.js を使用していますが、現在プロジェクトで少し行き詰まっているように感じています。ホバー機能を使用してボタンのスタイルを設定しようとしていますが、これを react に適用する方法がわかりません。

コードは次のとおりです:

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

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

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

正しい構文は何ですか?

ベストアンサー1

以下を使用できます:

    const 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リポジトリはすべての場合に必要というわけではなく、上記の設定はそのままで動作するはずです。

おすすめ記事