试图突出显示 React-data-grid 中的单元格答案

【问题标题】：Trying to highlight cell in React-data-grid试图突出显示 React-data-grid 中的单元格
【发布时间】：2017-05-18 15:20:03
【问题描述】：

我正在尝试在我的 react-data-grid (adazzle) 中将某些列的背景颜色渲染为某种颜色。

问题是我的单元格周围出现了这种白色填充：

如何去掉这个白色的填充？

我只是按照本示例中使用格式化程序的方式进行操作：

http://adazzle.github.io/react-data-grid/examples.html#/custom-formatters

我的 ColumnFormatter 看起来像这样：

const ColumnFormatter = React.createClass({
  propTypes: {
    value: React.PropTypes.number.isRequired
  },

  render() {
    return (
      <div style={{background: '#f2f9de'}}>
        {this.props.value}
      </div>);
  }
});

我这样设置我的专栏：

this._columns.push({
  key:  i,
  name: "blah " + i,
  sortable: true,
  resizable: true,
  formatter: ColumnFormatter
})

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

这是一种简单的方法，但可能无法完全按照您的意愿工作......

somefile.js

<div id="someTableId">
  <ReactDataGrid
    ...
  />
</div>

somefile.css...

#someTableId div.react-grid-Row div.react-grid-Cell:nth-of-type(1),
#someTableId div.react-grid-Row div.react-grid-Cell:nth-of-type(2){
  background-color: #f2f9de;
}

另外，当我做一个 react-data-grid 单元格格式化程序时，我喜欢让事情变得简单（注意：使用上面的 css 方式你不需要格式化程序，而只是为了展示我如何简化格式化程序或者如果你这样做格式化程序的另一种方式）...

this._columns.push({
  key:  i,
  name: "blah " + i,
  sortable: true,
  resizable: true,
  formatter: (props)=>(<div style={{background: '#f2f9de'}}>{props.value}</div>;
})

实际上我会使用 className 而不是 style 并使用 css 文件，但这正是我喜欢的。

【讨论】：

【解决方案2】：

在格式化程序中，您可以像现在一样提供背景，但您可以在自定义 css 文件中添加这样的 css：

#parentDivOfGrid div.react-grid-Row div.react-grid-Cell {
  padding-left: 0px ;
  padding-right: 0px;
  line-height: 2.1;
  text-align: center;
}

但是你的 React 数据网格应该在这样的 div 中：

<div id="parentDivOfGrid">
  <ReactDataGrid
    ...
  />
</div>

您可能想根据您的网格在 css 中使用行高值。

【讨论】：

【解决方案3】：

这里的两个答案似乎都将突出显示应用于所有单元格。我将如何通过指定类名来选择性地突出显示单元格

【讨论】：

【解决方案4】：

在这个简单的示例中，尝试完全放弃格式化程序。在 css 文件中创建一个类。将 cellClass 设置为您刚刚创建的类。列的背景应该是全彩色的。值和填充。

我的环境：

"react": "^17.0.2",
"react-data-grid": "^7.0.0-beta.7",

app.css

.green {
       background-color: green;
}

app.js

this._columns.push({
  key:  i,
  name: "blah " + i,
  sortable: true,
  resizable: true,
  cellClass: 'green`

})

【讨论】：