ReactJs：Material-UI 表 - 更改填充答案

【问题标题】：ReactJs: Material-UI table - changing paddingReactJs：Material-UI 表 - 更改填充
【发布时间】：2021-01-26 06:41:42
【问题描述】：

对于这个全栈应用程序，我进入原始开发人员似乎已经实现了一些组件来为应用程序的网页创建表格

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

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

似乎 MuiTableCell 没有直接在代码中实现（因此我只会在渲染的 DOM 中看到它，而不是在代码中）。似乎它主要实现了 material-ui 和 material-table。

我有一点前端经验，但我不熟悉接下来要做什么来修改填充。

具体来说，通过使用 chrome 开发人员工具，我想将正确的填充（设置为 24px）设置为 0px，以便渲染的 DOM 使用它

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

有什么建议吗？

我认为可能相关的来自@Material-UI 的一些导入是： ToolBar、Appbar、FormControl、InputField、TextField、ViewColumn、TablePagination

从material-table导入的是'MaterialTable，和MTableToolbar

在intellij中我盲查了一下，发现SizeSmall属性好像来自TableCell（material-ui的一部分）

【问题讨论】：

标签： javascript material-ui material-table

【解决方案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">
        ...

【讨论】：