css - 如何控制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", 
  }
}));

并且选项卡图像将显示在选项卡的中心。

Here您的codesandbox已修改。