Material ui 类似Excel的DataGrid条件格式：如何删除单元格之间的填充

我试图根据类似Excel的值对DataGrid进行有条件的着色。我在每个单元格内渲染了一个宽度为100%的方框，但似乎在每个单元格的左右两侧都有一些16px的填充。有没有办法去掉这种填充物？提前谢谢

从“React”导入React；
从“@material ui/data grid”导入{DataGrid}”；
从“@material ui/core”导入{Box}”；
函数renderCell（{value}）{
常量颜色=值>0？'red'：'green'；
返回{value}
}
常量列=[
{字段：“id”，标题名：“Col”}，
{field:“A”，headerName:“A”，renderCell:（p）=>renderCell（p）}，
{字段：“B”，标题名：“B”，renderCell：（p）=>renderCell（p）}，
];
常量行=[
{id:1，A:100，B:-100}，
{id:2，A:50，B:100}
];
导出默认函数Demo（）{
返回(
);
}

import React from "react";
import { DataGrid } from "@material-ui/data-grid";
import { Box } from "@material-ui/core";

function renderCell({value}) {
  const color = value > 0 ? 'red' : 'green';
  return <Box bgcolor={color} width={1}>{value}</Box>
}

const columns = [
  { field: "id", headerName: "Col"},
  { field: "A", headerName: "A", renderCell: (p) => renderCell(p)},
  { field: "B", headerName: "B", renderCell: (p) => renderCell(p)},
];

const rows = [
  { id: 1, A: 100, B: -100},
  { id: 2, A: 50, B: 100}
];

export default function Demo() {
  return (
    <DataGrid      
      autoHeight={true}
      columns={columns}
      rows={rows}
    />
  );
}