0

我使用的是使用React Data Grid（https://github.com/adazzle/reaeact-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 框架是否存在干扰？

4

1 回答 1

0

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

于 2016-06-15T08:54:11.803 回答