时间戳

首页 > 解决方案 > Material-UI TableCell-root中padding-right 40px是什么原因

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

问题描述

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

.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;
}

标签： javascriptcssreactjsmaterial-designmaterial-ui

解决方案

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

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

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

推荐阅读