Upgrade Material UI from v0.x to v4.x: Tabs

Recently I’ve been working on a project that originally used version 0.17.2 of Material UI.

As part of a wider upgrade to the latest versions of the frameworks we use on this project, both for security & performance, we want to get to version 4.9.0.

Starting the migration is pretty straightforward using MUI guides, but some of the components are missing migration guides.

One of the components missing a guide is one we use a lot: Tabs. I’ve scribbled down some notes on how I tackled upgrading, and what the major differences were.

Getting started

Material UI have a good starter guide for migrating from v0.x to v1.x and one for upgrading from v3.x to v4.x (v2 was skipped in Material UI).

The basics that you need to know:

• You can run both the original and latest versions at the same time,
• MUI have a code migration tool for stuff that’s straightforward to migrate (paths to basic components, icons, and colours)
• It’s easier if you tackle the migration of each additional component one at a time
• Only some of the components have migration guides

Handling the changes in Tabs

The primary difference between the versions is that the tab panel content is no longer nested inside the Tab. Which means that the handling of which panel to show is now up to you.

So, it’s gone from this:

const ExampleV0Tabs = () => (
  <Tabs>
    <Tab label="Tab One">Tab One panel content here</Tab>
    <Tab label="Tab Two">Tab Two panel content here</Tab>
  </Tabs>
);

To:

const ExampleV4Tabs = () => {
  const [currentTab, setCurrentTab] = useState(0);
  const handleChange = (event, newTab) => {
    setCurrentTab(newTab);
  };
  return (
    <section>
      <Tabs value={currentTab} onChange={handleChange}>
        <Tab label="Tab One" />
        <Tab label="Tab Two" />
      </Tabs>
      {currentTab === 0 && <div>Tab One panel content here</div>}
      {currentTab === 1 && <div>Tab Two panel content here</div>}
    </section>
  );
};

Note: The onChange signature includes the event, not just the value, it’s easy to forget and wonder why your tabs are clickable but do nothing other than throw a console error about change of type on the state.

Other API changes

The API for tabs changed quite a lot from 0.x to 1.x to 4.x, as you can see from the following table. If you're using any of the deprecated props, then you'll get console errors. It's likely you'll be able to remove the majority of them, as I found they refer to a lot of styles that are now default.

If you need to customise the styles, you'll likely need to either style the Tab component itself, or move the props into the classes object that is passed through, and use the names provided in the docs for the relevant elements. I found we'd not overridden a lot of the default styles, so removing them was fairly harmless.