在反應創建的網格中對齊文本

Question

我正在使用使用React數據網格（https://github.com/adazzle/react-data-grid）的網格，並且自從選擇單元格時它的邊框覆蓋了下一個單元格的文本以來，我遇到了麻煩。我已經通過了「探索性編程」路線，但我無法理解在哪裏添加代碼以對齊文本。

` .react-grid-Container { 
    clear: both; 
} 
.react-grid-Main { 
    background-color: #ffffff; 
    color: inherit; 
    outline: 1px solid #e7eaec; 
    clear : both; 
} 
.react-grid-Grid { 
    background-color: #ffffff; 
    border: 1px solid #dddddd; 
} 
.react-grid-Canvas { 
    background-color: #ffffff; 
} 
.react-grid-Cell { 
    background-color: #ffffff; 
    border-right: 1px solid #111; 
    border: 1px solid #dddddd; 
} 
.react-grid-Cell:not(.editing) .react-grid-Cell__value { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
.react-grid-Canvas.opaque .react-grid-Cell:not(.editing) { 
    opacity: 0.4; 
    transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 
.react-grid-Row:hover .react-grid-Cell, 
.react-grid-Row.row-context-menu .react-grid-Cell { 
    background-color: #f2f2f2; 
} 
/*.... 
Some code that handles editing 
......*/ 
.react-grid-Header { 
    box-shadow: 0px 0px 4px 0px #dddddd; 
    background: #f9f9f9; 
} 
.react-grid-HeaderCell { 
    background: #f9f9f9; 
    padding: 8px; 
    font-weight: bold; 
    border: 1px solid #dddddd; 
} 
.react-grid-HeaderCell__value { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
.react-grid-Cell:hover { 
    background: #eee; 
} 
.react-grid-Cell.selected { 
    border: 2px solid #66afe9; 
    background: #eee; 
    border-radius: 4px; 
    overflow: visible; 
    z-index: 10; 
}` 

我是否遺漏了一些明顯的問題，或者是否存在干擾Reaction框架的問題？

Answer 1

我設法創造瞭解決方案，但仍然是一個醜陋的解決方案。我只是添加了一個指向全身的樣式和文本對齊標籤，並確保React不會覆蓋更改。