2017-04-20 3 views
0

Ich verwende npm Modul reagieren Tisch, möchte ich auf schweben (OnMouseEnter) den Stil einer Zeile ändern. Ich fand die folgende Option in ihrer Dokumentation, die alle Zeilen style, aber ich möchte jede Zeile bei Hover style ich versuchte mit onMouseEnter und geben Sie das Styling, aber es ist nicht das nehmen. Irgendwelche Vorschläge!Stil ändern React-Tabelle für jede Zeile auf schweben

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

Antwort

1

Ich würde versuchen, dies mit CSS zu lösen. Beispiel unten:

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

Ich griff diese von hier: https://codepen.io/tannerlinsley/pen/rmeGBP?editors=0110

Er löst es eine andere Art und Weise hier: http://codepen.io/tannerlinsley/pen/bWprzr?editors=0010

Prost!

Verwandte Themen