reactjs - 向material-ui AppBar组件添加垂直分隔线

Question

我们如何为 AppBar 设置垂直分隔线，如 muicss's Left/Right divider component ？

仅插入 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 |

Answer 1

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

<Divider orientation="vertical" flexItem />

请参见此处:https://material-ui.com/components/dividers/