尝试突出显示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;
}

另外，当我做一个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文件，但这正是我更喜欢的。

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

这里的两个答案似乎都将突出显示应用于所有单元格。我应该如何有选择地突出显示单元格？