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

// About 2 min reading time

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:

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.

Tabs v0.x Tabs v1.x Tabs v4.x
action action
centered centered
children children children
classes classes
className
component component
contentContainerClassName
contentContainerStyle
fullWidth
indicatorColor indicatorColor
initialSelectedIndex
inkBarStyle
inkBarContainerStyle
onChange onChange onChange
orientation
scrollable
ScrollButtonComponent ScrollButtonComponent
scrollButtons scrolButtons
style
TabIndicatorProps TabIndicatorProps
tabItemContainerStyle
TabScrollButton
tabTemplate
tabTemplateStyle
textColor textColor
value value value
variant

← Home