reactjs - 尝试突出显示 React-data-grid 中的单元格

Question

我试图在我的 react 数据网格(令人眼花缭乱)中将某些列上的背景颜色渲染为某种颜色。

问题是我的单元格周围出现白色填充:

如何去掉这个白色填充？

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

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
}) 

Answer 1

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

somefile.js

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

一些文件.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 而不是样式并使用 css 文件，但这正是我喜欢的。