Javascript ReactJs:材质UI表-更改填充

对于这个fullstack应用程序，我迁移到了原始开发人员中，他们似乎已经实现了一些组件来为应用程序的网页创建表

问题是所有单元格上的填充都相当大。在chrome中打开呈现页面，并使用我可以看到的chrome开发者工具

看起来MuiTableCell并没有直接在代码中实现（因此我只在呈现的DOM中看到它，而不在代码中看到它）。似乎它主要实现材质界面和材质表

我有一点前端经验，但我不熟悉下一步如何修改填充

具体地说，通过使用chrome开发者工具，我想将正确的填充（设置为24px）设置为0px，以便渲染的DOM使用此选项

有什么建议吗

我认为从@Material UI导入的一些内容可能与此相关： 工具栏、Appbar、FormControl、InputField、TextField、ViewColumn和TablePagination

从材质表导入的和是“MaterialTable”和“MTableToolbar”

---

在intellij中，我做了一次盲搜索，发现SizeSmall属性似乎来自TableCell（材质ui的一部分）

CSS是由

small

值组成的

覆盖它的一种方法是使用

makeStyles

和覆盖

.MuiTableCell size调用

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">
        ...

从'@materialui/core/styles'导入{makeStyles}；
const useStyles=makeStyles({
可定制：{
“&.MuiTableCell sizeSmall”：{
填充：“6px 0px 6px 16px”//
.MuiTableCell-sizeSmall{
    padding: 6px 0px 6px 16px;
}

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">
        ...