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

import React from 'react';
import { Tabs, Tab } from '@material-ui/core';

function VerticalTabs() {
  return (
    <Tabs
      orientation="vertical"
      style={{ width: '200px' }}  // 设置Tabs的宽度
    >
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  );
}

export default VerticalTabs;

import React from 'react';
import { Tabs, Tab, makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  tabs: {
    width: '200px',  // 设置Tabs的宽度
  },
});

function VerticalTabs() {
  const classes = useStyles();

  return (
    <Tabs
      orientation="vertical"
      className={classes.tabs}
    >
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  );
}

export default VerticalTabs;

/* styles.css */
.verticalTabs {
  width: 200px;
}

import React from 'react';
import { Tabs, Tab } from '@material-ui/core';
import './styles.css';

function VerticalTabs() {
  return (
    <Tabs
      orientation="vertical"
      className="verticalTabs"
    >
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  );
}

export default VerticalTabs;

import React from 'react';
import { Tabs, Tab, createMuiTheme, ThemeProvider } from '@material-ui/core';

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      root: {
        width: '200px',  // 设置所有Tabs的宽度
      },
    },
  },
});

function VerticalTabs() {
  return (
    <ThemeProvider theme={theme}>
      <Tabs orientation="vertical">
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>
    </ThemeProvider>
  );
}

export default VerticalTabs;