懸停表上的每一行的反應表更改樣式

我正在使用react-table npm模塊，我想更改懸停（onMouseEnter）上的一行樣式。我在他們的文檔中找到了下面的選項，它允許樣式化所有行，但是我想在懸停時對每一行進行樣式設置，我嘗試使用onMouseEnter並給出了樣式，但它沒有采用該樣式。有什麼建議麼！懸停表上的每一行的反應表更改樣式

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

來源

2017-04-20 kay

我會嘗試解決這個使用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

乾杯！

來源

2017-09-29 14:27:49 rishikarri

懸停表上的每一行的反應表更改樣式

回答

相關問題