Material UI Appbar 上的垂直分隔线答案

【问题标题】：Vertical Divider on Material UI AppbarMaterial UI Appbar 上的垂直分隔线
【发布时间】：2020-08-25 19:14:39
【问题描述】：

我正在尝试在 Material-ui 的 Appbar 中添加一个垂直分隔器组件。我在这里遇到了同样的问题，但是发布的解决方案不适用于我的情况：Adding vertical divider to material-ui AppBar component

获取此代码：

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

问题是分隔线的高度为 0，尽管它在 css 中设置为 100%。链接问题中发布的解决方案对我不起作用，因为边框没有跨越 AppBar 的整个高度。

作为参考，该问题的公认解决方案是在 AppBar 中为您的组件添加边框：

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

就像我说的那样，这并没有扩展 AppBar 的整个高度，为了使它看起来正确，我需要将填充设置为任意数字：0.764em

如果我能做到这一点而不定义这样的任意值，那就太好了。有人有想法么？编辑：添加垂直方向（这并没有改变任何东西）

编辑2：添加沙盒链接：https://codesandbox.io/s/material-demo-forked-9xz9i?file=/src/demo.js

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

如果您不想像@Boussadjra 建议的那样为您的Toolbar 设置固定高度，另一种可能的解决方案是不在您的Divider 上使用height: 100%，而是使用min-height: inherit。

...
<Divider
  orientation="vertical"
  style={{ minHeight: "inherit", color: "red", width: "25px" }}
/>

注意Toolbar 有media queries，在上面设置固定高度可能不太理想。

【讨论】：