如何控制 Material-UI 垂直标签的宽度？

Question

我正在使用 Material-UI 选项卡。感谢其他人在Creating a Material-UI tab with image tabs instead of text labels 的威胁中的帮助，我能够让图像适用于我的标签，但无论我制作的图像有多小，我都无法控制标签的宽度 - 如果我制作标签，标签的宽度确实会增加放大图片。

我在https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js 有一个代码沙盒来演示问题。

我确实设法使用内联样式设置选项卡的宽度，但它只是将内容剪裁到右侧，而不是使图像在较窄的选项卡中居中。

如果没有内联样式，在大约 600 像素处会有一个响应式断点。在断点下方，选项卡宽度约为 72 像素。比断点大，选项卡宽度约为 160。我只是通过测量不同的浏览器窗口并将此应用程序覆盖在上面来猜测这些数字。如果我使用内联样式手动强制宽度，我可以看到图像位置仍然在断点处移动，就好像图像居中的基础宽度是原始选项卡宽度一样，就好像我没有强制宽度一样。

我确定了这些确切的宽度数字，因为视觉测量与 Material-UI tab.js 源代码中的两个最小宽度数字非常接近。这可能是巧合。实际上我确实尝试过更改源代码中的内容并再次测试，但它们对断点行为没有影响，因此我将文件恢复为原始文件。

如果可能的话，我希望能够根据自己的需要设置宽度，根据自己的需要设置边距/填充，并且仍然让图像在结果中居中。

Answer 1

Ciao，要将图像居中在Tab 上，您必须以这种方式将样式传递给Tabs 上的flexContainerVertical 类：

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

然后在你的makeStyles:

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

Tab 图像将出现在选项卡的中心。

Here你的密码箱已修改。