React Material-UI Cookbook

There's more...

The centered layout for tabs works well on smaller screens, while the full width layout looks good on larger screens. You can use Material-UI utilities that tell you about breakpoint changes. You can then use this information to change the alignment of your tabs.

Here's a modified version of this example:

import React, { useState } from 'react';import compose from 'recompose/compose';import { withStyles } from '@material-ui/core/styles';import withWidth from '@material-ui/core/withWidth';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, width }) { const [value, ...