반응 작성 격자 내에서 텍스트 정렬

Question

React Data Grid (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; 
}` 

명백한 부분이 없거나 방해하는 반응 프레임 워크가 있습니까?

Answer 1

솔루션을 만드는 데 어려움을 겪었지만 여전히 추악한 솔루션입니다. 나는 단순히 몸 전체를 가리키는 스타일과 텍스트 정렬 태그를 추가 했으므로 React가 변경 사항을 덮어 쓰지 않았 음을 확인했습니다.