在Material-ui中如何使用... theme.mixins.toolbar或如何入门？

Question

我在material-ui文档中找不到有关... theme.mixins.toolbar的任何文档。这是做什么的？如何更改或使用它？

Answer 1

它只是为元素增加了最小高度。当您将AppBar与下面的内容部分一起使用时，这很有用，例如，您想在内容的顶部添加一个空格，这样它就不会消失在AppBar下。

我找不到关于它的特定文档，但是在Material-UI 布局示例中有使用它的示例，我相信它可能是由此函数创建的。

更具体地说，它在仪表板示例中使用：

toolbarIcon: {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-end',
  padding: '0 8px',
  ...theme.mixins.toolbar,
},

这将导致类似：

toolbarIcon: {
  display: flex;
  align-items: center;
  justifyContent: flex-end;
  padding: 0 8px;
  min-height: 64px;
}

Answer 2

有全局默认主题。具体来说，对象上的 theme.mixin.toolbar 属性会增加一个最小高度。

theme:
 breakpoints: Object
  direction: "ltr"
 mixins: Object
  gutters: f gutters()
  toolbar: Object
   minHeight: 56
   @media (min-width:0px) and (orientation: landscape): Object
   @media (min-width:600px): Object

从网站：

提示：您可以在控制台中使用文档主题对象，因为主题变量在所有文档页面上都公开。请注意，文档站点使用的是自定义主题。

如果您想了解有关如何组装主题的更多信息，请查看material-ui/style/createMuiTheme.js以及 createMuiTheme 使用的相关导入。

这是文档