反应材料表 - 设置行高答案

【问题标题】：React material-table - set row height反应材料表 - 设置行高
【发布时间】：2020-10-22 18:33:38
【问题描述】：

首先，我已经测试了我建立的所有可能的解决方案，但我仍然没有解决我的问题。

我想在我的材料表行中设置一个较短的高度。这就是它现在的样子。

我希望我的行的高度与该图像中的标题相似。我尝试了很多东西，其中之一是：

    options={{
         headerStyle: {
             whiteSpace: "nowrap",
             height: 20,
             maxHeight: 20,
             padding: 0
         },
         rowStyle: {
             height: 20,
             maxHeight: 20,
             padding: 0
         },
    }}

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

标签： reactjs material-table

【解决方案1】：

您可以在材料表中设置选项

options={{
  padding: "dense",
}}

【讨论】：

【解决方案2】：

我在使用 React Material-Table 时遇到了同样的问题。我修复了在项目的全局 index.css 中添加这个：

.MuiTableCell-root  {
  padding: 0 14px !important;
}

然后我可以在 Material-Table 组件的选项中修改 rowStyle 的高度：

options = {
    rowStyle: {
        height: "20px"
    }
}

【讨论】：

【解决方案3】：

你需要使用withStyles并更新特定的元素类样式，所以它会反映到所有元素。按照您的预期在这里检查工作示例：codesandbox

import MuiTableCell from '@material-ui/core/TableCell';

const TableCell = withStyles(theme => ({
  root: {
    height: 10,
    padding:0
  }
}))(MuiTableCell);

【讨论】：

【解决方案4】：

更加简化，将 16px 的内边距覆盖为更小的尺寸...。

【讨论】：

【解决方案5】：

我认为下面的链接可能对您有所帮助。

customizing material ui table

【讨论】：