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

Question

我在React JS应用程序中使用material-ui中提供的Table组件。但是，在样式prop中指定高度：10px不会调整各行的高度。 请建议如何指定或减少默认行高。

Answer 1

您可能需要将所有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>

Answer 2

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

                        this.deleteItem（index）}> {item.name}                         锅数                         {this.changeRate（event，index）}} type =“ number” />                         {item.rate}                         {item.itemTotal}                     

Answer 3

只需在选项中添加rowStyle: {height: 50}。

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

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

不需要CSS覆盖。

Answer 4

使用materialUi类

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

const classes = tableStyles()

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