ReactJs：Material-UI 表 - 更改填充

Question

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

问题是所有单元格的填充都很大。在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

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

在intellij中我进行了盲目搜索，发现SizeSmall属性似乎来自TableCell（material-ui的一部分）

Answer 1

CSS 是size propsmall的 value的工作。

重写它的方法之一是使用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">
        ...