javascript - react Js : Material-UI table - changing padding

Question

对于这个全栈应用程序，我进入原始开发人员似乎已经实现了一些组件来为应用程序的网页创建表格
问题是所有单元格的填充都很大。在 chrome 中打开呈现的页面并使用我可以看到的 chrome 开发人员工具

.MuiTableCell-sizeSmall{
    padding: 6px 24px 6px 16px;
}

似乎 MuiTableCell 没有直接在代码中实现(因此我只会在呈现的 DOM 中而不是在代码中看到它)。似乎它主要实现 Material -ui 和 Material 表 .
我有一点前端经验，但我不熟悉接下来要做什么来修改填充。
具体来说，通过使用 chrome 开发人员工具，我想将正确的填充(设置为 24px)设置为 0px，以便渲染的 DOM 使用它

.MuiTableCell-sizeSmall{
    padding: 6px 0px 6px 16px;
}

有什么建议吗？
我认为可能相关的来自@Material-UI 的一些导入是:
ToolBar、Appbar、FormControl、InputField、TextField、ViewColumn、TablePagination
并且从 Material 表导入的是'MaterialTable，和MTableToolbar
在intellij中我盲查了一下，发现SizeSmall属性好像来自TableCell(material-ui的一部分)

Answer 1

CSS 是 small 的作品size prop 的值.
覆盖它的方法之一是使用 makeStyles并覆盖 .MuiTableCell-sizeSmall

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customTable: {
    "& .MuiTableCell-sizeSmall": {
      padding: "6px 0px 6px 16px" // <-- arbitrary value
    }
  },
});

function YourComponent() {
  const classes = useStyles();

  return (
    ...
      <Table classes={{root: classes.customTable}} size="small">
        ...