试图在React-data-grid中突出显示单元格

Question

我试图在某些颜色上渲染某些颜色的背景颜色，在我的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
}) 

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

另外，我喜欢在做反应数据网格单元格格式化时简单易懂（注意：使用上面的css方式，你不需要格式化程序，只是为了说明我如何简化格式化程序或者如果你用格式化程序做另一种方式）...

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

实际上我会做一个className而不是样式并使用css文件，但这正是我喜欢的。

Answer 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中的行高值。

Answer 3

这两个答案似乎都对所有单元格都使用了突出显示。我该如何通过指定类名来选择性地突出显示单元格