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

Material-UI是一个流行的React UI组件库，提供了丰富的可定制化的组件，包括垂直页签（Vertical Tabs）。

要控制Material-UI垂直页签的宽度，可以通过以下几种方式实现：

1. 使用CSS样式控制：可以通过为垂直页签的父容器添加自定义的CSS样式来控制宽度。可以使用width属性来设置宽度值，例如：

.vertical-tabs-container {
  width: 200px;
}

然后将该样式应用到垂直页签的父容器上：

<div className="vertical-tabs-container">
  <VerticalTabs />
</div>

1. 使用Material-UI的Tab组件属性：Material-UI的Tab组件提供了style属性，可以直接在组件上设置样式。可以通过设置style属性中的width来控制宽度，例如：

<Tab label="Tab 1" style={{ width: '200px' }} />

这样可以直接在垂直页签的每个选项卡上设置宽度。

1. 使用Material-UI的TabPanel组件属性：如果需要控制垂直页签中每个选项卡对应的内容面板的宽度，可以使用TabPanel组件，并设置其style属性中的width来控制宽度，例如：

<TabPanel value={value} index={0} style={{ width: '200px' }}>
  Content of Tab 1
</TabPanel>

这样可以直接在每个选项卡对应的内容面板上设置宽度。

需要注意的是，以上方法可以根据具体需求选择使用，可以单独使用其中一种方式，也可以结合使用。另外，具体的宽度数值可以根据实际情况进行调整。

关于Material-UI的更多信息和相关组件的详细介绍，可以参考腾讯云的官方文档和组件库链接：

• Material-UI官方文档
• 腾讯云Material-UI组件库