如何调整material-ui表格组件的行高答案

【问题标题】：How to adjust row height of a material-ui table component如何调整material-ui表格组件的行高
【发布时间】：2018-10-06 10:14:05
【问题描述】：

我在我的 React JS 应用程序中使用 material-ui 中可用的 Table 组件。但是，在 style 属性中指定 height:10px 不会调整各个行的高度。请建议如何指定或减少默认行高。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

使用 materialUi 类

const tableStyles = makeStyles({
  tableHead: {
    height: 44,
  },
})

const classes = tableStyles()

    
<TableHead>
  <TableRow className={classes.tableHead}>
    ...
  </TableRow>
</TableHead>

【讨论】：

【解决方案2】：

只需将rowStyle: {height: 50} 添加到选项中即可。

const options: Options = {
    ...
    rowStyle: {height: 50},
    ...
}

<MaterialTable
        ...
        options={options}
        ...
/>

不需要 CSS 覆盖。

【讨论】：

【解决方案3】：

您可以尝试减少表格单元格的填充，但您必须对所有表格单元格都这样做。这只是一种解决方法。

this.deleteItem(index)}>{item.name} 锅号 {this.changeRate(event,index)}} type="number" /> {item.rate} {item.itemTotal}

【讨论】：

【解决方案4】：

您可能需要将所有td 的高度设置为自动，然后您将能够更改tr 行高

使用 css 应用它

tr {
  height: 10px;
}

tr td {
   height: auto !important;
}

或者如果您没有导入 CSS 文件，您可以这样做

          <TableRow style={{height: 10}}>
          <TableRowColumn style={{ height: 'auto !important' }}>Height</TableRowColumn>
          <TableRowColumn style={{ height: 'auto !important' }}>10px</TableRowColumn>
          </TableRow>

【讨论】：

感谢利亚姆，这部分工作。我的意思是，如果我指定 height: 50 或以上，那么行高就会改变。但是，指定任何小于 50 的值不会对屏幕进行任何更改。我确实想让行更精简一些。