2017-04-20 6 views
0

リアクションテーブルnpmモジュールを使用しています。ホバー上の行のスタイル(onMouseEnter)を変更したいと思います。私はドキュメントの中で以下のオプションを見つけました。すべての行をスタイルすることができますが、私は各行をonMouseEnterを使って試してスタイリングをしてみましたが、それは取っていません。助言がありますか!ホバー上の各行のリアクション表の変更スタイル

getTrProps={(state, rowInfo, column) => { 
    return { 
    style: { 
     background: rowInfo.age > 20 ? 'green' : 'red' 
    } 
    } 
}} 

答えて

1

私はCSSを使用してこれを解決しようとします。以下の例:

.ReactTable .rt-tr .action { 
    transition: all .2s ease 
    text-align: center 
    color: red 
    transform: scale(0) 
} 

.ReactTable .rt-tr:hover .action { 
    transform: scale(1.3) 
} 

.ReactTable .rt-tr:hover .rt-td { 
    background: yellow 
} 

は、私はここからこれをつかん:https://codepen.io/tannerlinsley/pen/rmeGBP?editors=0110

彼はそれをここでは別の方法で解決:http://codepen.io/tannerlinsley/pen/bWprzr?editors=0010

乾杯を!

関連する問題