为material-ui AppBar组件添加垂直分隔线答案

【问题标题】：Adding vertical divider to material-ui AppBar component为material-ui AppBar组件添加垂直分隔线
【发布时间】：2018-01-14 07:38:10
【问题描述】：

我们怎样才能像muicss's Left/Right divider component一样为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 |

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用右边框来添加垂直分隔线。使用 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>

【讨论】：

【解决方案2】：

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

<Divider orientation="vertical" flexItem />

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

【讨论】：

如何增加分隔线和菜单项之间的间距？