Tab alignment

The Tabs component has two properties to help you align your tab buttons. The centered property centers the tabs, while the fullWidth property spreads out the tabs.

How to do it...

Let's say that you have three basic tabs using the following code:

import React, { useState } from 'react';

import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  }
});

function TabAlignment({ classes }) {
  const [value, setValue] = useState(0);

  const onChange = (e, value) => {
    setValue(value);
  };

...