如何使用 react.js 解决 Material UI 中的垂直选项卡问题？答案

【问题标题】：How can I solve this vertical tab problem in material UI using react.js?如何使用 react.js 解决 Material UI 中的垂直选项卡问题？
【发布时间】：2020-06-08 15:03:24
【问题描述】：

我正在尝试使用 react.js 中的材质 UI 实现垂直选项卡。由于某种原因，选项卡没有出现。这是代码：

Javascript：

const [value, setValue] = useState(0);
  const handleChange1 = (event, newValue) => {
    setValue(newValue);
  };

用户界面：

    <div className={classes.root}>
      <Tabs
        orientation="vertical"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Tab label="Item Three" {...a11yProps(2)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>

CSS：

root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
    display: 'flex',
    height: 400,
  },
  tabs: {
    borderRight: `1px solid ${theme.palette.divider}`,
    width:100
  },

最终结果：

https://i.stack.imgur.com/mUT7L.png

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

首先删除enter code here部分，其次css显示可能会导致问题。尝试将显示更改为“块”

这里是演示链接：https://codesandbox.io/s/material-demo-lj0bu?file=/demo.js

【讨论】：