问题是Toolbar响应性地改变了它的高度，而Tabs和Tab组件没有（Tabsmin-height在其root类中设置了48px ，Tab在其类中设置了高度root）。

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

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

这将创建一个与Toolbar组件中使用的响应高度逻辑相同的类。使用withStyles，你可以让你的组件可以访问这个类：

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

// ...

export default withStyles(styles)(Header);

这将添加一个classesprops，它是一个对象，其中包含提供给 的对象中定义的每个类的字符串属性withStyles。您可以通过覆盖它们的根类来将其应用于Tabs组件和每个Tab组件，以确保它们填充：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>
    );

这是您的代码和框的修改版本，其中包含上述更改。