How to control the width of Material-UI vertical tabs?

Question

I am working with Material-UI tabs. Thanks for the help of others in the threat at Creating a Material-UI tab with image tabs instead of text labels , I was able to get images working for my tabs but I cannot control the width of the tabs no matter how small I make the images - the tabs do grow in width if I make the images larger.

I have a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js that demonstrates the problem.

I did manage to set the width of the tabs using inline styles but it just clipped the content to the right rather than centering the image in the narrower tab.

Without the inline style, there is a responsive breakpoint at about 600 pixels. Below the breakpoint, the tab width is about 72 pixels. Larger than the breakpoint, the tab width is about 160. I just guessed these numbers by measuring a different browser window and overlying this app on it. If I do manually force the width with the inline style, I can see that the image location still moves at the breakpoint as though the underlying width that the images are centering to is the original tab width as though I hadn't forced the width.

I settled on these exact numbers of width because the visual measurement matched very close to two min-width numbers in the Material-UI tab.js source code. It could be coincidence. I actually did try changing those in the source code and testing again but they had no effect on the breakpoint behavior so I put the file back to original.

If it's at all possible, I'd like to be able to set the width to my own needs, set margins/padding to my own needs, and still have the images centered in the result.

Answer 1

Ciao, to center the image on Tab you have to pass a style to flexContainerVertical class on Tabs in this way:

<Tabs
   orientation="vertical"
   value={value}
   onChange={handleChange}
   aria-label="Vertical tabs example"
   className={classes.tabs}
   classes={{
      flexContainerVertical: classes.flexContainerVertical   // pass the class flexContainerVertical
   }}
> 

Then on your makeStyles :

const useStyles = makeStyles((theme) => ({
  ...
  flexContainerVertical: {
    display: "flex",
    alignItems: "center", 
  }
}));

And Tab images will appear on center of the Tab.

Here your codesandbox modified.