如何使用 Material-ui 在工具栏内拥有全高选项卡？

我试图有一个固定的标题，右侧应该是选项卡。这<Toolbar />组件负责块的响应能力，但不允许拉伸的标签如此轻松。

https://codesandbox.io/s/jv8v6vwqpv https://codesandbox.io/s/jv8v6vwqpv

问题是Toolbar https://material-ui-next.com/api/toolbar/响应地改变它的高度和Tabs https://material-ui-next.com/api/tabs/ and Tab https://material-ui-next.com/api/tab/组件不（选项卡设置min-height其 48pxroot类，Tab 设置其高度root class).

幸运的是，行为Toolbaruse 在主题 mixin 中可用，因此您可以创建也使用此逻辑的类：

const styles = theme => ({
  fullHeight: {
    ...theme.mixins.toolbar,
  },
});

这将创建一个具有与中使用的相同的响应高度逻辑的类Toolbar成分。使用与样式 https://material-ui-next.com/guides/typescript/#usage-of-withstyles，您可以使您的组件可以访问此类：

import { withStyles } from "material-ui/styles";

// ...

export default withStyles(styles)(Header);

这将添加一个classesprop，它是一个对象，其中包含提供给对象中定义的每个类的字符串属性withStyles。您可以将其应用到Tabs组件和每个Tab组件由压倒他们的root classes https://material-ui-next.com/customization/overrides/#overriding-with-classes以确保他们填满AppBar:

  render() {
    const { classes } = this.props;
    return (
      <AppBar>
        <Toolbar>
          <Grid container alignItems="center" justify="space-between">
            <Grid item>
              <Typography color="inherit" variant="title">
                BackTube
              </Typography>
            </Grid>
            <Grid item>
              <Tabs classes={{ root: classes.fullHeight }} onChange={this.changeTab} value={this.state.currentTab}>
                <Tab classes={{ root: classes.fullHeight }} icon={<Magnify />} value="search" />
                <Tab classes={{ root: classes.fullHeight }} icon={<FormatListBulleted />} value="lists" />
                <Tab classes={{ root: classes.fullHeight }} icon={<Settings />} value="settings" />
              </Tabs>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    );

请注意，上述解决方案是为 MUI v1 beta 编写的。

更新 5/2022：在 MUI 5 中可以完成同样的事情，这里是代码沙箱 https://codesandbox.io/s/full-height-tabs-demo-for-mui-5-zn5pep