Material UI — Customize Tabs

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize tabs with Material UI.

Centered

We can make tabs centered with the centered prop.

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} centered>
          <Tab label="Item One" />
          <Tab label="Item Two" />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
    </>
  );
}

Then the tabs will be centered.

Scrollable Tabs

We can make tabs scrollable with the scrollButtons set to auto and variant set to scrollable .

This way, the scroll buttons will be shown on mobile and hidden in the desktop.

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="auto"
        >
          {Array(10)
            .fill()
            .map((_, i) => (
              <Tab label={`Item ${i + 1}`} />
            ))}
        </Tabs>
      </AppBar>
      {Array(10)
        .fill()
        .map((_, i) => (
          <TabPanel value={value} index={i}>
            Item {i + 1}
          </TabPanel>
        ))}
    </>
  );
}

We created 10 tabs with the Array constructor and mapped them to tabs.

Similar, we did the same with the TabPanel s.

Now we should see an arrow button when the tabs overflow the page.

On mobile, we can scroll with swiping.

Prevent Scroll Buttons

We can turn off scroll buttons with the scrollButtons prop set to off .

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="off"
        >
          {Array(10)
            .fill()
            .map((_, i) => (
              <Tab label={`Item ${i + 1}`} />
            ))}
        </Tabs>
      </AppBar>
      {Array(10)
        .fill()
        .map((_, i) => (
          <TabPanel value={value} index={i}>
            Item {i + 1}
          </TabPanel>
        ))}
    </>
  );
}

And now we’ll never see the tab scroll buttons.

Customizing Tab Styles

We can customize the tab styles with the withStyles higher-order component.

For example, we can write:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
import { withStyles } from "@material-ui/core/styles";

const StyledTab = withStyles(theme => ({
  root: {
    textTransform: "none",
    color: "yellow",
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: theme.typography.pxToRem(15),
    marginRight: theme.spacing(1)
  }
}))(props => <Tab disableRipple {...props} />);

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="off"
        >
          {Array(5)
            .fill()
            .map((_, i) => (
              <StyledTab label={`Item ${i + 1}`} />
            ))}
        </Tabs>
      </AppBar>
      {Array(5)
        .fill()
        .map((_, i) => (
          <TabPanel value={value} index={i}>
            Item {i + 1}
          </TabPanel>
        ))}
    </>
  );
}

We call with the withStyles function with an object with some styles.

And we pass in a function that returns a Tab with props passed into it.

This way, we apply the styles in the object to the tab.

Then we can use the returned StyledTab in our App component.

Conclusion

We can customize tabs in various ways.

The styles, scroll ability, and more can be changed.