reactjs - 如何将选项卡与 React Material-UI 中的标题放在同一行？（包括代码沙盒）

Question

https://codesandbox.io/embed/material-demo-v1pyw?fontsize=14&hidenavigation=1&theme=dark

我正在尝试将标签与标题一起放置

这样标签就在标题旁边。

我所做的是在AppBar组件内添加选项卡，

<AppBar className={classes.appBar}>
  <Toolbar>
    <IconButton
      edge="start"
      color="inherit"
      onClick={handleClose}
      aria-label="close"
    >
      <CloseIcon />
    </IconButton>
    <Typography variant="h6" className={classes.title}>
      Sound
    </Typography>
  </Toolbar>

  <Tabs
    variant="fullWidth"
    value={value}
    onChange={handleChange}
    aria-label="nav tabs example"
  >
    <LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />
    <LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />
    <LinkTab label="Page Three" href="/spam" {...a11yProps(2)} />
  </Tabs>
</AppBar>

但似乎它们无法放入标题中。

请问有什么帮助吗？

标签： reactjsmaterial-ui

Answer 1

您可以简单地将它们添加到工具栏中：

    <AppBar className={classes.appBar}>
      <Toolbar>
        <IconButton
          edge="start"
          color="inherit"
          onClick={handleClose}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Typography variant="h6" className={classes.title}>
          Sound
        </Typography>
        <Tabs
          variant="fullWidth"
          value={value}
          onChange={handleChange}
          aria-label="nav tabs example"
        >
          <LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />
          <LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />
          <LinkTab label="Page Three" href="/spam" {...a11yProps(2)} />
        </Tabs>
      </Toolbar>          
    </AppBar>

看起来像这样：