材质表减少列之间的间隔

Question

我有一个使用ReactJs和Material Ui创建的表，如下所示。

进行现场测试：https://codesandbox.io/s/material-demo-692nz?file=/demo.js

我想减少列之间的空间，无论我在其后添加多少列，第一列之后总会有很大的空间。就像他们有某种“介于两者之间”的风格，但无法将其删除。

任何提示？谢谢

import React from "react";
import  makeStyles  from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles(
  table: 
    minWidth: 50
  
);

function createData(name, calories, fat, carbs, protein) 
  return  name, calories, fat, carbs, protein ;


const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

export default function SimpleTable() 
  const classes = useStyles();

  return (
    <TableContainer component=Paper>
      <Table className=classes.table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="left">Dessert (100g serving)</TableCell>
            <TableCell align="left">Calories</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          rows.map(row => (
            <TableRow key=row.name>
              <TableCell component="th" scope="row">
                row.name
              </TableCell>
              <TableCell align="left">row.calories</TableCell>
            </TableRow>
          ))
        </TableBody>
      </Table>
    </TableContainer>
  );