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

时间:2018-04-25 20:18:04

标签: reactjs material-ui

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

4 个答案:

答案 0 :(得分: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>

Edit wwppr4306w

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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

不需要CSS覆盖。

答案 3 :(得分:0)

使用materialUi类

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

const classes = tableStyles()

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