将垂直分隔线添加到 Material-UI AppBar 组件

Question

我们如何像muicss的左/右分隔组件那样给AppBar设置垂直分隔线?

简单地插入具有height: 100%属性的div元素并不能起到作用。

<AppBar position="static" color="default">
  <Toolbar>
    <Typography type="title" color="inherit">
      Title
    </Typography>
    <div style={{
      border: 'solid #ff0000',
      height: '100%'
      }}>
    </div>
    <Typography type="title" color="inherit">
      Title 2
    </Typography> 
  </Toolbar>
</AppBar>

这里是代码的实时示例。 https://codesandbox.io/s/54070o6v2x

谢谢。

我的环境

| Tech         | Version |
|--------------|---------|
| Material-UI  | next    |
| React        | 16.2.0  |
| Browser      | Chrome 63.0.3239.84 |

- Ozawa Tomohiko

Answer 1

这也可以用于垂直菜单栏分隔线：

<Divider orientation="vertical" flexItem />

请看这里：https://material-ui.com/components/dividers/

- timhc22

---

如何增加分隔符和菜单项之间的间距？ - KTM

答案正确，但在我的情况下需要添加sx={{display: "inline"}}。 - Amir Mehrnam

Answer 2

您可以使用右侧边框添加垂直分割线。 使用em作为边框大小和填充大小，以使您的元素具有响应性。 您可以在此处查看结果here

<Toolbar>
  <Typography
    type="title"
    color="inherit"
    style={{ borderRight: '0.1em solid black', padding: '0.5em' }}
  >
    Title
  </Typography>

  <Typography type="title" color="inherit" style={{ padding: '0.5em' }}>
    Title 2
  </Typography>
</Toolbar>

- kirecligol