'MaterialUI Appbar with Tabs - can it be scrollable AND fullwidth

I would like my tab buttons to spread out across the entire screen.

When the screen width is too skinny to fit all the tabs, I would like the scroll buttons to show up.

MaterialUI has variant='scrollable' and the variant='fullWidth'. It does not appear to allow both of these to be used at the same time.

If I use the property scrollButtons='auto' in combination with variant='fullWidth' I don't get scroll buttons when things get to skinny.

Is there a mechanism for letting this work? Centering the buttons mitigates the issue somewhat, but isn't the real answer.

reactjs material-ui

Solution 1:^[1]

I know this question has been asked a while ago but in case someone would wonder, here is what I did:

import { Tabs, Tab } from ‘@mui/material’

<Tabs {…propsTabs} variant=“scrollable”>
  <Tab {…propsTab1} sx={{ minWidth: “fit-content”, flex: 1 }} />
  <Tab {…propsTab2} sx={{ minWidth: “fit-content”, flex: 1 }} />
  …
</Tabs>

The MUI Tabs component has a { display: “flex” } property.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Rom

'MaterialUI Appbar with Tabs - can it be scrollable AND fullwidth

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]