html - 在 Reaction 创建的网格中对齐文本

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;
}` 

我是不是漏掉了一些明显的东西，或者 Reaction 框架有什么干扰？

Answer 1

我设法创建了解决方案，一个丑陋的解决方案，但仍然如此。我只是添加了一个指向整个 body 的样式和文本对齐标签，并确保 React 不会覆盖更改。