React Material-UI Cookbook

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);  };  return (    <div className={classes.root}>      <Tabs value={value} onChange={onChange}>        <Tab label="Item One" />        <Tab label="Item Two" />        <Tab label="Item Three" />      </Tabs>    </div>  );}export default withStyles(styles)(TabAlignment);

Here's what you should see when the ...