Question

我是React和Material UI的新手。我正在为组件占用多少垂直空间而苦苦挣扎。我想做的一件事是降低工具栏的高度。

我尝试指定样式：

<Toolbar style={{ height: '36px' }}>

我也尝试过这种方式：

const styles = {
  root: {
    height: 36,
  }
};
<Toolbar className={classes.root} >

，但都不起作用。有其他方法吗？

Answer 1

这是因为默认高度是64px。

要更改高度，您必须实际更改minHeight属性。

为此，我使用了内联样式，但它也可以与其他方法一起使用。

    const toolbarStyle = {
    minHeight: '80px',
  };

然后在组件中只需使用样式属性指定样式名称

<Toolbar style={toolbarStyle}>

希望这会有所帮助！

Answer 2

我也尝试过更改工具栏的高度，但是它没有用。我最终只是将工具栏变体设置为密集，与常规工具栏相比，它仍然使我的工具栏高度更短。

<Toolbar variant="dense">

Answer 3

您需要更改min-height以调整高度，因为material-ui.css中将min-height指定为64px。

const styles = {
  customizeToolbar: {
    minHeight: 36,
  }
};

<Toolbar className={classes.customizeToolbar} >

希望这会对您有所帮助。

Answer 4

分配minHeight值：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  toolbar: {
    minHeight: '10px',
    backgroundColor: 'IndianRed'
  }
}));

```
const classes = useStyles();
```
只需在组件中指定className：
```
<Toolbar className={classes.toolbar}>
```

如何更改“材质UI”工具栏的高度？

4 个答案: