Reactjs 材质Ui表减少了列之间的空间

我用ReactJs和Material Ui创建了一个表，如下代码所示

她接受了现场测试：

我想减少列之间的空间，无论在第一列之后添加多少列，第一列之后总是有很大的空间。这就像他们有一些“间隔”样式，但无法删除它

有什么建议吗？多谢各位

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

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
const useStyles=makeStyles({
表:{
最小宽度：50
}
});
函数createData（名称、卡路里、脂肪、碳水化合物、蛋白质）{
返回{名称、卡路里、脂肪、碳水化合物、蛋白质}；
}
常量行=[
createData（“冷冻酸奶”，159,6.0,24,4.0），
createData（“冰淇淋三明治”，237,9.0,37,4.3），
createData（“Eclair”，262,16.0,24,6.0），
createData（“杯形蛋糕”，305,3.7,67,4.3），
createData（“姜饼”，356,16.0,49,3.9）
];
导出默认函数SimpleTable（）{
const classes=useStyles（）；
返回(
甜点（100克）
卡路里
{rows.map（row=>(
{row.name}
{row.carries}
))}
);
}

使用内联样式，将

宽度添加到
下的
即可

<TableCell align="left" style={{width: 200}}>Dessert (100g serving)</TableCell>

或

可能适合样式要求。
谢谢。你的解决方案工作，但固定的不是最好的选择，它的文本更大，它将采取2行，即使是屏幕非常宽，有自由空间。我现在就用这个；）我认为minWidth是一个很好的选择。我会检查的。谢谢你好。strangly
minWidth:50
已应用，但不要做任何思考，like width值更大，并从其他地方设置了一个合理的内容：“间隔”或类似的内容，但我没有发现它
maxWidth
不适合
style={{minWidth:25，maxWidth:50}
先生，您能找到这个问题的解决方案吗？我还想在行之间添加空格。我该怎么做？
style={{width: '20vw'}}

style={{minWidth: 200}}