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

Question

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

Answer 1

有全局默认主题。具体地说，对象上的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使用哪个。

这里是documentation

Answer 2

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

我找不到关于它的特定文档，但是在Material-UI layout examples中有使用它的示例，我相信它可能是由this function创建的。

更具体地说，它在Dashboard example中使用：

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;
}