如何更改 Material UI 工具栏的高度？

Question

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

我试过指定样式：

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

我也试过这样做：

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

但两者都不起作用。有没有不同的方法来做到这一点？

Answer 1

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

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

<Toolbar className={classes.customizeToolbar} >

希望这会帮助你。

Answer 2

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

<Toolbar variant="dense">

Answer 3

要全局更改工具栏的高度，请在 MUI 主题中进行配置：

const theme = createTheme({
    components: {
        MuiToolbar: {
            styleOverrides: {
                dense: {
                    height: 32,
                    minHeight: 32
                }
            }
        }
    },
})

然后使用这个主题：

<ThemeProvider theme={theme}>
   ...
</ThemeProvider>

通过这种方式，您可以调整主题中许多 Mui 组件的外观，这将应用于<ThemeProvider/>React 块中的所有元素。

无需对单个元素进行 css 调整，而是通过修改主题在一个地方正确地进行调整。