How can I have full-height Tabs inside of a Toolbar using material-ui?

Question

I am trying to have a fixed header where on the right side should be tabs. The <Toolbar /> component is responsible for the responsiveness of the block but doesn't allow for stretched tabs so easily.

https://codesandbox.io/s/jv8v6vwqpv

Answer 1

The problem is that the Toolbar responsively changes its height and the Tabs and Tab component do not (Tabs sets a min-height of 48px in its root class, Tab sets a height in its root class).

Fortunately, the behavior Toolbar uses is available in a theme mixin, so you can create classes that also use this logic:

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

This will create a class that has the same responsive height logic used in the Toolbar component. Using withStyles, you can make this class accessible to your component:

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

// ...

export default withStyles(styles)(Header);

This will add a classes prop, which is an object containing a string attribute for each class defined in the object provided to withStyles. You can apply this to the Tabs component and each Tab component by overriding their root classes to ensure that they fill the 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>
    );

Here is a modified version of your codesandbox with the changes above.