Excel-like conditional formatting with DataGrid: How to remove padding between cells

I was trying to conditionally color a DataGrid based on its value similar to Excel. I rendered a Box inside each cell with width = 100% but there seems to have some 16px paddings on both left and right of each cell. Is there any way to remove such padding? Thanks in advance.

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