我如何使用react.js解决材料UI中的垂直标签问题？

Question

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

Javascript：

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

UI：

    <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: 'fle[enter image description here][1]x',
    height: 400,
  },
  tabs: {
    borderRight: `1px solid ${theme.palette.divider}`,
    width:100
  },

最终结果：

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

Answer 1

首先删除enter code here部分，然后CSS显示可能会导致此问题。尝试将显示更改为“阻止”

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