javascript - Material-UI TableCell-root 中 padding-right 40px 是什么原因

Question

我只是好奇这是什么原因。我打算覆盖它，只是想确保我不会消除某人的彻底工作。

.MuiTableCell-root {
    display: table-cell;
    padding: 14px 40px 14px 16px;
    font-size: 0.875rem;
    text-align: left;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.43;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    letter-spacing: 0.01071em;
    vertical-align: inherit;

有趣的是

.MuiTableCell-root:last-child {
    padding-right: 16px;
}

Answer 1

这是当前规范:https://material.io/design/components/data-tables.html#specs

我在规范中没有看到任何明确提到这个 40px 填充的内容，尽管该示例确实显示了列之间的相当大的空间。

我认为这样做的目的只是为了在相邻单元格中的数据之间留出美观的空间，并提高可读性。如果您在表格上使用 size="small"，填充量会显着减少(padding-right 为 24px)。