Css 材质UI应用栏上的垂直分隔符

我试图在material ui中的Appbar中添加垂直分隔器组件。我遇到了与此处相同的问题，但是发布的解决方案不适用于我的情况：

以这个代码为例：

<AppBar position="static" color="default">
  <Toolbar>
    <Typography type="title" color="inherit">
      Title
    </Typography>
    <Divider style={{
      height: '100%'
      }} orientation="vertical">
    </Divider>
    <Typography type="title" color="inherit">
      Title 2
    </Typography> 
  </Toolbar>
</AppBar>

---

如果您不想像@Boussadjra建议的那样为
工具栏设置固定高度，另一种可能的解决方案是不要在
分隔器上使用
高度：100%
，而是使用
最小高度：继承

。。。

请注意，
工具栏
具有
媒体查询
，在其上设置固定高度可能并不理想



<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>