将垂直分隔线添加到material-ui AppBar组件 [英] Adding vertical divider to material-ui AppBar component

问题描述

我们如何像 muicss 的 Left/Right 分隔线组件一样为 AppBar 设置垂直分隔线?

仅插入高度为 100％的div元素无效.

Simply inserting div element with height: 100% does not work.

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

推荐答案

您可以使用右边框来添加垂直分隔线.使用 em 作为边框大小和填充大小，以使您的元素具有响应能力.您可以在此处

You can use a right border in order to add a vertical divider. Use em for the border size and padding size so that your elements are responsive. You can see the result 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>

这篇关于将垂直分隔线添加到material-ui AppBar组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！